:root{
  --teal:#0e8f8f; --teal-d:#0b6b6b; --teal-l:#63dede;
  --ink:#0f2b30; --muted:#587075; --bg:#f5fafa; --card:#ffffff; --line:#e2eeee;
  --radius:14px; --maxw:940px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-d); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

header{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; font-size:20px; color:var(--ink)}
.brand:hover{text-decoration:none}
nav a{margin-left:22px; color:var(--muted); font-weight:500}

.hero{text-align:center; padding:56px 0 40px}
.hero .logo{width:96px; height:96px; margin:0 auto 22px; display:block}
.hero h1{font-size:clamp(30px,5vw,46px); line-height:1.1; margin:0 0 16px; letter-spacing:-.02em}
.hero p.sub{font-size:19px; color:var(--muted); max-width:620px; margin:0 auto 30px}
.cta{display:inline-flex; align-items:center; gap:9px; background:var(--teal); color:#fff;
  padding:13px 24px; border-radius:999px; font-weight:600; font-size:16px}
.cta:hover{background:var(--teal-d); text-decoration:none}
.note{margin-top:14px; font-size:14px; color:var(--muted)}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; padding:30px 0 10px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.card h3{margin:0 0 7px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:15px}

.legal{max-width:760px; margin:0 auto; padding:20px 0 40px}
.legal h1{font-size:30px; margin:0 0 6px}
.legal .eff{color:var(--muted); margin:0 0 26px}
.legal h2{font-size:19px; margin:28px 0 8px}
.legal p,.legal li{color:#274449}
.legal ul{padding-left:20px}

.disclaimer{background:#eef7f7; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; color:var(--muted); font-size:14px; margin:26px 0}

footer{border-top:1px solid var(--line); margin-top:40px; padding:26px 0; color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center}
footer a{color:var(--muted)}