:root{
  --brand:#0d4d4d;
  --brand-600:#0a3939;
  --brand-300:#1aa3a3;
  --brand-100:#d8f1f1;
  --ink:#1f2933;
  --muted:#4b5563;
  --bg:#f9fbfc;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 10px 25px rgba(16,24,40,.08);
  --max:1080px;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial; color:var(--ink); background:var(--bg)}
a{color:var(--brand); text-decoration:none}
.container{max-width:var(--max); margin-inline:auto; padding:clamp(16px,3vw,28px)}
header{position:sticky; top:0; background:linear-gradient(180deg, rgba(216,241,241,.65), rgba(249,251,252,.85)); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #e5e7eb; z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:.75rem}
.brand img{height:42px}
.menu{display:flex; gap:.5rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem; border-radius:999px; border:2px solid transparent; font-weight:650; letter-spacing:.2px; transition:background .2s ease, transform .05s ease, box-shadow .2s ease}
.btn-ghost{background:rgba(26,163,163,.06); color:var(--brand); border:1px solid var(--brand-300)}
.btn-ghost:hover{background:rgba(26,163,163,.12)}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-600)}
.hero{padding:clamp(36px,8vw,80px) 0; background: radial-gradient(60% 80% at 10% 0%, var(--brand-100), transparent 60%)}
.hero h1{font-size:clamp(28px,4vw + 10px,46px); line-height:1.12; margin:.2rem 0; color:var(--brand)}
.hero p{max-width:75ch; color:var(--muted)}
section{padding:clamp(28px,6vw,56px) 0}
.section-title{font-size: clamp(20px, 2.6vw + 8px, 28px); margin:0 0 .6rem; color:var(--brand)}
.lead{font-size:1.05rem; color:var(--muted)}
.grid{display:grid; gap:clamp(16px,2vw,22px)}
.grid-2{grid-template-columns:repeat(1,1fr)}
.grid-3{grid-template-columns:repeat(1,1fr)}
@media(min-width:800px){.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card); border:1px solid rgba(10,57,57,.12); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(16px,2.5vw,24px)}
.list{margin:0; padding-left:1.1rem}
.list li+li{margin-top:.4rem}
.badge{display:inline-block; padding:.18rem .6rem; border-radius:999px; background:var(--brand-100); color:var(--brand); font-weight:700; font-size:.75rem; border:1px solid var(--brand-300)}
.footer{font-size:.95rem; color:#6b7280; border-top:1px solid #e5e7eb}
.step{display:flex; gap:.9rem; align-items:flex-start}
.step-num{flex:0 0 36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-300); color:#fff; font-weight:800}
form{display:grid; gap:14px}
.row{display:grid; gap:12px}
@media(min-width:720px){.row{grid-template-columns:1fr 1fr}}
label{font-weight:600; color:var(--ink)}
.hint{font-size:.9rem; color:#6b7280}
input, select, textarea{width:100%; padding:.85rem 1rem; border-radius:12px; border:1.5px solid rgba(10,57,57,.18); background:#fff; font:inherit; color:inherit; outline:none; transition:border-color .15s ease, box-shadow .15s ease}
input:focus, select:focus, textarea:focus{border-color:var(--brand-300); box-shadow:0 0 0 3px rgba(26,163,163,.15)}
textarea{min-height:160px; resize:vertical}
.actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:6px}
.small{font-size:.9rem; color:#6b7280}
.hr-accent{height:8px;background:linear-gradient(90deg,var(--brand-300),transparent);border-radius:6px;opacity:.6;margin-bottom:14px}