/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, li, a { margin: 0; padding: 0; list-style: none; text-decoration: none; }

/* Typography & layout */
:root { --brand:#0073e6; --brand-700:#005bb5; --ink:#333; --bg:#f9f9f9; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.6; color: var(--ink); background: var(--bg); }

/* Header */
header { position: sticky; top:0; z-index: 10; display:flex; justify-content:space-between; align-items:center; background:var(--brand); color:#fff; padding:1rem; }
header .logo h1 { font-size: 1.25rem; }
header .logo h1 a { color:#fff; }
header nav ul { display:flex; gap:1rem; }
header nav a { color:#fff; font-weight:600; }
header nav a:hover, header nav a:focus { color:#cce4ff; outline:none; }

/* Hero */
#hero { background:#e0f3ff; text-align:center; padding: 3rem 1rem; }
#hero h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .75rem; }
#hero p { font-size: 1.125rem; margin-bottom: 1.5rem; }
#hero .cta { display:inline-block; padding:.75rem 1.25rem; background:var(--brand); color:#fff; border-radius:8px; }
#hero .cta:hover, #hero .cta:focus { background:var(--brand-700); }

/* Sections */
section { padding: 2rem 1rem; max-width: 960px; margin: 0 auto; }

/* Cards */
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; text-align:left; }
.cards li { background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:1rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.cards h3 { margin-bottom:.25rem; font-size:1.125rem; }
.cards p { color:#555; }

/* Form */
form { display:grid; gap:1rem; max-width:640px; margin-inline:auto; text-align:left; }
.field label { display:block; font-weight:600; margin-bottom:.25rem; }
.field input, .field textarea { width:100%; padding:.625rem .75rem; border:1px solid #ccc; border-radius:8px; background:#fff; }
.field input:focus, .field textarea:focus { outline:2px solid #cce4ff; border-color: var(--brand); }
.error { color:#c00; font-size:.875rem; min-height: 1.25rem; display:block; }
.hp { position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
button[type="submit"] { padding:.75rem 1rem; border:0; border-radius:8px; background:var(--brand); color:#fff; font-weight:600; cursor:pointer; }
button[type="submit"]:hover, button[type="submit"]:focus { background:var(--brand-700); }
#formResponse { margin-top:.5rem; font-weight:600; }

/* Footer */
footer { text-align:center; background:var(--brand); color:#fff; padding:1rem; margin-top:2rem; }