:root{
  --bg:#ffffff; --fg:#0f172a; --muted:#475569; --brand:#1a73e8; --brand-2:#0ab3d9;
  --card:#f8fafc; --border:#e2e8f0; --success:#16a34a; --warn:#eab308; --error:#dc2626;
  --radius:14px; --shadow:0 6px 22px rgba(2,6,23,.08);
  --maxw:1120px;
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--font); color:var(--fg); background:var(--bg); line-height:1.6}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; left:16px; top:16px; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; z-index:10000}

.site-header{position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border); z-index:999}
.header-wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px}
.brand img{display:block}
.nav-toggle{font-size:24px; background:none; border:1px solid var(--border); border-radius:10px; padding:6px 10px}
.site-nav ul{list-style:none; padding:0; margin:0; display:none; flex-direction:column; gap:6px}
.site-nav a{display:block; padding:10px 8px; border-radius:10px}
.site-nav a:hover{background:var(--card)}

.hero{padding:28px 0 12px; background:linear-gradient(180deg, #f6f9ff 0%, #fff 100%)}
.hero h1{font-size:clamp(24px, 5vw, 42px); line-height:1.2; margin:8px 0 12px}
.hero p.lead{font-size:clamp(16px, 3.8vw, 19px); color:var(--muted); margin:0 0 16px}
.cta-row{display:flex; flex-wrap:wrap; gap:10px}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow); font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; border:0}
.btn.small{padding:8px 12px; font-weight:600}

.kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0}
.kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px}
.kpi strong{font-size:20px}

.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:1fr}
.section{padding:28px 0}
.section.dense{padding:18px 0}
.section h2{font-size:clamp(20px,4.5vw,32px); margin:0 0 12px}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.card h3{margin-top:0}

.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{border-bottom:1px solid var(--border); padding:10px 8px; text-align:left}
.table th{font-size:13px; color:var(--muted); font-weight:600}

.form{display:grid; gap:10px}
.form label{font-weight:600}
.form input, .form select, .form textarea{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:16px}
.form .row{display:grid; gap:10px; grid-template-columns:1fr 1fr}
.notice{padding:12px; border-left:4px solid var(--brand); background:#eef5ff; border-radius:10px}

.faq details{border:1px solid var(--border); border-radius:12px; padding:12px; background:#fff}
.faq summary{font-weight:700; cursor:pointer}
.faq details+details{margin-top:10px}

.site-footer{margin-top:40px; background:#0b1220; color:#dbeafe}
.site-footer a{color:#93c5fd}
.footer-wrap{padding:24px 16px}
.footer-cols{display:grid; gap:18px}
.footer-cols section h3{margin-top:0; color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.15); margin-top:14px; padding-top:14px}
.contact{list-style:none; padding:0; margin:0}
.contact li{margin-bottom:6px}

.cookie-banner{position:fixed; bottom:16px; left:0; right:0}
.cookie-wrap{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#0b1220; color:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); max-width:var(--maxw); margin:0 auto}
.cookie-actions{display:flex; gap:8px}

.badge{display:inline-block; background:#e2efff; color:#0b3e9c; border-radius:999px; padding:6px 10px; font-size:13px; font-weight:700}
.pros-cons{display:grid; gap:10px}
.pros-cons .pros, .pros-cons .cons{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px}
.pros-cons ul{margin:0; padding-left:18px}

blockquote.expert{border-left:4px solid var(--brand); background:#f1f7ff; padding:12px; border-radius:12px}

/* Homepage features */
.features{display:grid; gap:14px; grid-template-columns:1fr}
.feature{display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:var(--shadow)}
.feature .icon{width:28px; height:28px; color:var(--brand); flex:0 0 auto; margin-top:2px}
.feature h3{margin:0 0 6px; font-size:18px}
.feature p{margin:0; color:var(--muted)}

@media (min-width: 760px){
  .site-nav ul{display:flex; flex-direction:row; gap:6px}
  .nav-toggle{display:none}
  .hero{padding:50px 0 24px}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(4,1fr)}
  .footer-cols{grid-template-columns:2fr 1fr 1fr}
}