:root{ --brand:#114cab; --accent:#f2b100; }
*{ box-sizing:border-box } body{ margin:0; font-family:Inter,system-ui,Arial,sans-serif; color:#0f172a; background:linear-gradient(180deg,rgba(17,76,171,0.05) 0%, #fff 30%, rgba(242,177,0,0.04) 100%); }
a{ color:var(--brand); text-decoration:none } a:hover{ text-decoration:underline }
.container{ max-width:1200px; margin:0 auto; padding:0 16px }
.header{ position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:#ffffffcc; border-bottom:1px solid #e2e8f0; z-index:10 }
.header .row{ display:flex; align-items:center; gap:16px; padding:12px 0 }
.logo{ font-weight:800; color:var(--brand); display:flex; align-items:center; gap:8px }
.nav{ margin-left:auto; display:none; gap:24px; font-weight:600 } @media(min-width:768px){ .nav{ display:flex } }
.btn{ display:inline-flex; align-items:center; gap:8px; border-radius:12px; padding:10px 16px; font-weight:700; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 6px 12px rgba(17,76,171,.15) }
.btn-ghost{ border:1px solid var(--brand); color:var(--brand); background:#fff }
.hero{ padding:56px 0 }
.hero h1{ font-size:40px; line-height:1.1; margin:0 } @media(min-width:768px){ .hero h1{ font-size:56px } }
.hero .bullets{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; color:#334155; }
.section{ padding:24px 0 }
.section h2{ font-size:28px; margin:0 0 8px 0 }
.filters{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ border:1px solid var(--brand); border-radius:999px; padding:8px 12px; font-size:14px; background:#fff }
.chip.active{ background:var(--brand); color:#fff }
.search{ position:relative; margin-top:12px; max-width:420px }
.search input{ width:100%; padding:12px 36px 12px 12px; border:1px solid #cbd5e1; border-radius:12px }
.grid{ display:grid; gap:16px; grid-template-columns:1fr } @media(min-width:640px){ .grid{ grid-template-columns:repeat(2,1fr) } } @media(min-width:1024px){ .grid{ grid-template-columns:repeat(3,1fr) } }
.card{ border:1px solid #e2e8f0; background:#fff; border-radius:16px; padding:16px; box-shadow:0 4px 10px rgba(2,6,23,0.04) }
.card h3{ margin:8px 0; color:var(--brand) }
.card ul{ margin:8px 0 0 16px; padding:0; color:#334155 }
.badge{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:#475569 }
.badge + .badge{ margin-left:8px }
.why{ display:grid; gap:16px; grid-template-columns:1fr } @media(min-width:768px){ .why{ grid-template-columns:repeat(3,1fr) } }
.faq .item{ border:1px solid #e2e8f0; border-radius:16px; background:#fff; padding:16px }
.footer{ border-top:1px solid #e2e8f0; color:#475569; padding:16px 0 }
.drawer{ position:fixed; inset:0; display:none }
.drawer.open{ display:block }
.drawer .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4) }
.drawer .panel{ position:absolute; top:0; right:0; height:100%; width:100%; max-width:860px; background:#fff; border-left:1px solid #e2e8f0; overflow:auto; box-shadow:-8px 0 20px rgba(2,6,23,.08) }
.table{ width:100%; border-collapse:collapse; font-size:14px }
.table th,.table td{ border-bottom:1px solid #e2e8f0; padding:12px; text-align:left; vertical-align:top }