:root{ --maxw:1600px; --text:#0b0c0d; --bg:#fff; --muted:#f6f7fb; --brand:#0f3e8a; --brand-2:#0ea5e9; }
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; color:var(--text); background:var(--bg); line-height:1.6 }
a{ color:var(--brand) }
a:focus, button:focus{ outline:3px solid var(--brand-2); outline-offset:3px }
.skip-link{ position:absolute; left:-9999px; top:0; padding:.5rem .75rem; background:#000; color:#fff; z-index:1000 }
.skip-link:focus{ left:.5rem; top:.5rem }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 1rem }
header{ position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #e5e7eb }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0 }
.site-logo img{ height:100px; width:auto; display:block }
nav ul{ margin:0; padding:0; list-style:none; display:flex; gap:.5rem 1rem; flex-wrap:wrap }
nav a{ display:inline-block; padding:.5rem .75rem; text-decoration:none; border-radius:.5rem }
nav a:hover{ background:var(--muted) }
.cta{ background:var(--brand); color:#fff }
.cta:hover{ background:#0b2e66; color:#fff }
.hero{ background:linear-gradient(180deg,#f8fafc 0,#fff 100%); border-bottom:1px solid #e5e7eb }
.hero .inner{ display:grid; grid-template-columns:1fr; gap:1rem; padding:1rem 0 }
.hero h1{ margin:.5rem 0 0; font-size:2rem }
.hero p{ margin:0; color:#334155 }
.split{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin:2rem 0 }
@media(min-width:1000px){ .hero .inner{ grid-template-columns:2fr 1fr } .split{ grid-template-columns:1fr 1fr } }
.section{ padding:1.5rem 0 }
.section.alt{ background:var(--muted) }
.nowrap-link{ white-space:nowrap; display:inline-block; overflow:hidden; text-overflow:ellipsis; max-width:100% }
.cards{ display:grid; gap:1rem; grid-template-columns:1fr; margin:1rem 0 2rem }
@media(min-width:900px){ .cards{ grid-template-columns:repeat(4,1fr) } }
@media(min-width:1300px){ .cards{ grid-template-columns:repeat(5,1fr) } }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:1rem; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06) }
.card a{ color:inherit; text-decoration:none; display:block; height:100% }
.card figure{ margin:0; padding:1rem; display:grid; place-items:center; height:160px; background:#f9fafb }
.card img{ max-width:100%; height:100%; object-fit:contain; aspect-ratio:1/1 }
.card .content{ padding:1rem }
.card h3{ margin:.25rem 0 .5rem; font-size:1.05rem }
.card p{ margin:0; color:#475569; font-size:.95rem }
.faq{ max-width:1000px }
.faq-item{ border-bottom:1px solid #e5e7eb }
.faq-item button{ width:100%; text-align:left; background:#fff; border:0; padding:1rem; font-size:1rem; cursor:pointer }
.faq-item button:hover{ background:#f8fafc }
.faq-panel{ padding:0 1rem 1rem; display:none }
.faq-panel[hidden]{ display:none }
.faq-item button[aria-expanded="true"] + .faq-panel{ display:block }
footer{ border-top:1px solid #e5e7eb; padding:1.25rem 0; background:#fff }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:1rem }
@media(min-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr } .footer-right{ justify-self:end; text-align:right } }
.small{ font-size:.9rem; color:#475569 }