:root { --fg:#111; --muted:#666; --bg:#fff; --card:#f6f7f9; --line:#e6e8ee; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg); background:var(--bg); }
a { color:inherit; text-decoration:none; }
.wrap { max-width:980px; margin:0 auto; padding:28px 18px 42px; }

.top { position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:14px 18px; }
.logo { font-weight:700; letter-spacing:.2px; }
.nav a { margin-left:14px; color:var(--muted); }
.nav a:hover { color:var(--fg); }

.hero { padding:24px 0 18px; }
.hero h1 { margin:0 0 10px; font-size:36px; line-height:1.15; }
.hero p { margin:0 0 16px; color:var(--muted); max-width:780px; }

.cta { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 10px; }
.btn { display:inline-block; padding:10px 14px; border-radius:10px; background:var(--fg); color:#fff; }
.btn-ghost { background:#fff; color:var(--fg); border:1px solid var(--line); }

.badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.badges span { background:var(--card); border:1px solid var(--line); color:var(--muted); padding:6px 10px; border-radius:999px; font-size:13px; }

.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.card h2 { margin:0 0 6px; font-size:18px; }
.card p { margin:0; color:var(--muted); }

.split { display:grid; grid-template-columns: 1.3fr .7fr; gap:12px; margin-top:18px; align-items:start; }
.note { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.note h3 { margin:0 0 6px; font-size:16px; }
.small { color:var(--muted); font-size:13px; }

.contact { margin-top:18px; }
.contactbox { background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; }

.footer { border-top:1px solid var(--line); color:var(--muted); padding:16px 18px; display:flex; justify-content:space-between; }

@media (max-width: 840px) {
  .grid { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; }
  .hero h1 { font-size:30px; }
}