:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --ink-2: #475569;
  --teal: #0f766e;
  --teal-2: #0d9488;
  --sky: #e0f2fe;
  --border: #e2e8f0;
  --shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.04);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

h1{font-size: 40px; line-height: 1.15; margin: 12px 0;}
h2{font-size: 30px; margin: 0 0 8px;}
h3{font-size: 22px; margin: 0 0 8px;}
h4{font-size: 18px; margin: 0 0 8px;}

.lead{font-size: 18px; color: var(--ink-2); max-width: 52ch;}
.muted{color: var(--ink-2);}
.emph{color: var(--teal);}

.btn{display:inline-block; padding:10px 16px; border-radius:14px; border:1px solid var(--teal); background: var(--teal); color:#fff; text-decoration:none; font-weight:600; box-shadow: var(--shadow);}
.btn:hover{background:var(--teal-2); border-color:var(--teal-2);}
.btn.outline{background:#fff; color:var(--ink); border-color:#cbd5e1;}
.btn.outline:hover{background:#f8fafc;}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink); }
.btn.small{padding:8px 12px; font-size: 13px;}

.badge{display:inline-block; background:#e6fffb; color:#0f766e; border:1px solid #99f6e4; border-radius:12px; padding:6px 10px; font-size:12px; font-weight:600;}

.pill{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#1e293b; font-size:12px; border:1px solid #c7d2fe;}

.nav{position: sticky; top:0; backdrop-filter: blur(6px); background: rgba(255,255,255,0.85); border-bottom:1px solid var(--border); z-index: 100;}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:100px; padding:0 10px;}

.nav-links a{margin-left:16px; color:var(--ink); text-decoration:none;}
.nav-links a:hover{color:var(--teal);}
.nav-links .btn{margin-left:16px;}

.brand{display:flex; align-items:center; gap:16px;}
.brand-text{display:flex; flex-direction:column; justify-content:center;}
.brand-name{letter-spacing:.22em; font-size:12px; color:#0f766e; font-weight:700; margin-top:-2px;}
.brand-sub{font-size:12px; color:#64748b;}
.logo{width:40px; height:auto;}
.logo-header{width:96px; height:auto; display:block;}
.logo.small{width:32px; height:auto;}
.brand.mini{gap:8px;}

.hero{position:relative; overflow:hidden; background: linear-gradient(135deg, #ccfbf1 0%, #fff 40%, #e0f2fe 100%); padding: 64px 0;}
.section{padding:72px 0; background:#fff; border-top:1px solid var(--border);}
.section.alt{background:#fefefe;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px;}

/* Anchor offset so sections don't hide under the sticky header */
.section, .hero { scroll-margin-top: 110px; }
[id] { scroll-margin-top: 110px; }

.grid{display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap:16px;}
.grid.half{grid-template-columns: repeat(2, minmax(0,1fr));}
.grid.thirds{grid-template-columns: repeat(3, minmax(0,1fr));}
@media (min-width:640px){ .grid{grid-template-columns: repeat(2,minmax(0,1fr));} }
@media (min-width:1024px){ .grid{grid-template-columns: repeat(4,minmax(0,1fr));} .grid.thirds{grid-template-columns: repeat(3,minmax(0,1fr));} .grid.half{grid-template-columns: repeat(2,minmax(0,1fr));}}

.card{background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow: var(--shadow); padding:16px;}
.card-head .icon{width:40px;height:40px;border-radius:10px;background:#ecfeff;color:#0ea5a4;display:flex;align-items:center;justify-content:center;margin-bottom:8px;font-size:20px;}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.bullets{padding-left:18px; margin:8px 0; color:var(--ink-2);}
.price-list{padding-left:18px; margin:8px 0;}

.row{display:flex; gap:12px; flex-wrap:wrap;}
.chips{display:flex; gap:8px; flex-wrap:wrap; padding-left:0; list-style:none; margin-top:16px;}
.chips li{background:#fff; border:1px solid var(--border); border-radius:999px; padding:6px 10px; box-shadow: var(--shadow); font-size:13px;}

.form input, .form select, .form textarea{
  width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:12px; font: inherit; outline: none;
}
.form input:focus, .form select:focus, .form textarea:focus{ border-color:#0ea5a4; box-shadow:0 0 0 3px rgba(13,148,136,.15); }
.form label{font-size:14px; color:var(--ink); display:block; margin-bottom:8px;}
.right{display:flex; gap:10px; justify-content:flex-end;}
.alert{margin-top:12px; padding:12px; border-radius:12px; border:1px solid #cbd5e1;}
.alert.ok{background:#ecfeff; border-color:#99f6e4; color:#0f766e;}
.hidden{display:none;}
.mt{margin-top:20px;}

.footer{padding:20px 0; border-top:1px solid var(--border); background:#fff;}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.nav-small a{margin-left:12px; color:var(--ink); text-decoration:none;}
.nav-small a:hover{color:var(--teal);}

/* Optional: make header a bit shorter on narrow screens */
@media (max-width:640px){
  .nav-row{height:78px;}
  .logo-header{width:72px;}
}