:root{--brand:#2563eb;--accent:#22c55e;--muted:#64748b;--ink:#0f172a;--bg:#f8fafc}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;scroll-behavior:smooth}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #e2e8f0;z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px; text-decoration: none; color: var(--ink);}
.logo img{height:38px;width:auto}
.menu{display:flex;gap:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;border:0;cursor:pointer}
.btn.outline{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.hero{background:linear-gradient(180deg,#eef2ff,transparent);padding:48px 0}
.hero .top{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
h1{font-size:42px;line-height:1.1;margin:0 0 12px}
h1.page-title{font-size:36px;margin:18px 0 8px}
h1 .brand-text {color:var(--brand)}
.lead{font-size:18px;color:var(--muted);margin:0 0 18px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.badge{background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:6px 12px;font-size:12px;color:#334155}
.pill{display:inline-block;border:1px dashed #94a3b8;padding:6px 10px;border-radius:999px;font-size:12px;color:#475569}
section{padding:36px 0}
.page-section{padding:26px 0}
.page-container{max-width:960px;margin:0 auto;padding:0 20px}
h2{font-size:28px;margin:0 0 14px}
h3{font-size:18px;margin:0 0 8px}
.muted{color:var(--muted)}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.list{list-style: none; padding: 0; display:grid;gap:8px;}
.list li{display:flex;gap:8px;align-items:flex-start}
.check{color:var(--accent)}
.kpi{display:flex;gap:18px;flex-wrap:wrap}
.kpi .item{flex:1;min-width:220px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px}
.kpi .item .value {font-size:28px;font-weight:700}
footer{background:#0f172a;color:#cbd5e1;padding:32px 0;margin-top:36px}
.footer-row {display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer-links {color:#94a3b8}
.hero-buttons {display:flex;gap:10px;margin-top:16px}
.card-actions {margin-top:10px}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.form-control {width: 100%;padding: 10px;border: 1px solid #e2e8f0;border-radius: 10px;font-family: inherit;font-size: 1rem;}
textarea.form-control { resize: vertical; }
.faq details{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px; margin-bottom: 8px;}
.faq summary{cursor:pointer;font-weight:600}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;align-items:center}
.ref-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px;display:flex;align-items:center;justify-content:center;min-height:90px}
.ref-card img{max-height:45px;width:auto;object-fit:contain;filter:grayscale(100%);transition:filter .2s}
.ref-card:hover img{filter:grayscale(0)}
@media(max-width:960px){.hero .top{grid-template-columns:1fr}.grid-3,.grid-2{grid-template-columns:1fr}.menu {display: none;}}