:root{
  --bg:#f6f9fc; --card:#ffffff; --ink:#0e1116; --muted:#5b6470;
  --link:#0c53c7; --ring:#ffbf47; --maxw:1100px; --radius:18px; --gap:1.25rem;
}
*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;font-size:16px;line-height:1.6}
body{margin:0;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;border-radius:var(--radius)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a:focus{outline:3px solid var(--ring);outline-offset:2px}

.container{max-width:var(--maxw);margin:0 auto;padding:clamp(1rem,2vw,1.5rem)}
.grid{display:grid;gap:var(--gap)}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid #e6edf5;border-radius:var(--radius);padding:1rem;box-shadow:0 1px 0 rgba(17,24,39,.03)}
.kicker{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:.9rem}

.btn{display:inline-block;padding:.8rem 1.1rem;font-weight:700;border:2px solid var(--ink);border-radius:999px;background:#fff}
.btn:hover{transform:translateY(-1px)}
.badge{display:inline-block;background:#e8f4ff;border:1px solid #cfe6ff;border-radius:999px;padding:.15rem .6rem;font-size:.8rem}


header.site-header{background:linear-gradient(120deg,#e0f2fe,#fdf2f8);border-bottom:1px solid #e6edf5}
.nav-wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.6rem 0}
.logo{font-weight:900;letter-spacing:.4px}
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;background:#fff;border:2px solid var(--ring);padding:.25rem .5rem;border-radius:.4rem}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;flex-wrap:wrap}
nav a{padding:.45rem .7rem;border-radius:10px}
nav a:hover{background:#eef6ff}
nav a[aria-current="page"]{background:#0c53c7;color:#fff}


.hero{padding:1rem 0}
.hero .inner{display:grid;gap:var(--gap);align-items:center;grid-template-columns:1.2fr 1fr}
.hero figure{margin:0}


section{margin:clamp(1rem,3vw,2rem) 0}
figure{margin:0}
figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem}


ul.check{list-style:none;padding-left:0}
ul.check li{padding-left:1.6rem;position:relative}
ul.check li::before{content:"✓";position:absolute;left:.2rem;color:#15803d}


form{display:grid;gap:.9rem}
label{font-weight:700}
input,select,textarea{width:100%;padding:.8rem;border:1px solid #cbd5e1;border-radius:12px;background:#fff}
input[type="submit"],button{cursor:pointer}


footer.site-footer{margin-top:2rem;background:#fff;border-top:1px solid #e6edf5}
footer small{color:var(--muted)}


@media (max-width:900px){.hero .inner{grid-template-columns:1fr}}
@media (min-width:900px){.twocol{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){
  .nav-wrap{flex-direction:column; align-items:center; gap:.6rem}
  nav ul{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; padding:.25rem; margin:0}
  nav li{flex:0 0 auto}
  nav a{display:inline-block; padding:.6rem .9rem; white-space:nowrap; border-radius:999px}
  header.site-header{position: static}
  .hero{margin-top:.5rem}
  .hero .inner{grid-template-columns:1fr}
}