:root{--bg:#ffffff;--ink:#0f172a;--muted:#475569;--border:#e2e8f0;--soft:#f8fafc;--brand:#0f172a;--accent:#10b981}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.brand{display:flex;gap:12px;align-items:center;padding:14px 0}
.logo{width:40px;height:40px;border-radius:16px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.nav{display:flex;gap:6px;align-items:center}
.nav a{padding:8px 10px;border-radius:14px;color:var(--muted);font-size:14px}
.nav a.active{background:#f1f5f9;color:var(--ink)}
.nav .cta{margin-left:8px;background:var(--brand);color:#fff}
.nav .cta:hover{text-decoration:none;opacity:.92}
.lang{display:flex;gap:6px;align-items:center;margin-left:10px}
.lang button{border:1px solid var(--border);background:#fff;border-radius:14px;padding:8px 10px;font-size:13px;color:var(--muted);cursor:pointer}
.lang button.active{background:#f1f5f9;color:var(--ink)}
.hero{padding:56px 0;background:radial-gradient(800px 400px at 20% 10%, #f1f5f9 0, transparent 65%),radial-gradient(900px 500px at 90% 80%, #f1f5f9 0, transparent 70%)}
.badge{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted);box-shadow:0 1px 0 rgba(15,23,42,.04)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}
h1{font-size:40px;line-height:1.1;margin:14px 0 0}
p{color:var(--muted);line-height:1.6}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:18px;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.kpi{border:1px solid var(--border);border-radius:16px;padding:12px;background:#fff}
.kpi b{font-size:18px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;padding:12px 16px;font-weight:600;font-size:14px;border:1px solid var(--border);background:#fff}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{opacity:.92;text-decoration:none}
.btn:hover{background:var(--soft);text-decoration:none}
.section{padding:44px 0}
.section.soft{background:var(--soft);border-top:1px solid var(--border)}
h2{font-size:28px;margin:0}
h3{margin:0;font-size:16px}
ul{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.6}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--border);border-radius:16px;padding:12px 14px;font-size:14px;outline:none}
.form textarea{min-height:120px;resize:vertical}
.form .row{display:grid;gap:10px}
@media(min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
.form button{width:100%;border:0;border-radius:16px;padding:12px 14px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer}
.form small{display:block;color:var(--muted);font-size:12px;margin-top:10px}
.footer{border-top:1px solid var(--border);padding:28px 0;background:#fff}
.footer .cols{display:grid;gap:16px}
@media(min-width:900px){.footer .cols{grid-template-columns:1.2fr .9fr .9fr}}
.footer a{color:var(--muted)}
.hr{border-top:1px solid var(--border);margin-top:18px;padding-top:14px;color:#94a3b8;font-size:12px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}


/* === Header + Responsive Navigation === */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid #e6e6e6; background:#fff;
  position:relative;
}
.brand img{ height: 80px; width:auto; display:block; }
.main-nav a{
  margin-left:18px; text-decoration:none; color:#0a2540; font-weight:600;
}
.main-nav a:hover{ color:#1f6fd1; }
.nav-toggle{
  display:none; font-size:26px; background:transparent; border:0; cursor:pointer;
  color:#0a2540;
}

/* Mobile */
@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .main-nav{
    display:none;
    position:absolute; left:0; right:0; top:78px;
    background:#fff; border-bottom:1px solid #e6e6e6;
    padding:12px 22px;
  }
  .main-nav a{ display:block; margin:12px 0; }
  .main-nav.is-open{ display:block; }
}

/* === Footer === */
.site-footer{
  margin-top:40px; padding:26px 22px; background:#0a2540; color:#fff;
}
.site-footer a{ color:#fff; text-decoration:underline; }
.footer-inner{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.footer-brand img{ height: 60px; width:auto; }

/* === Videos responsive embed === */
.video-wrap{ position:relative; padding-top:56.25%; max-width:900px; }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; }


/* === Auto News (Blog) === */
.news-controls{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 6px 0; }
.news-btn{
  border:1px solid #cfd8e3; background:#fff; padding:10px 12px; border-radius:10px;
  cursor:pointer; font-weight:600;
}
.news-btn.is-active{ border-color:#1f6fd1; }
.news-list{ margin-top:10px; display:grid; gap:14px; }
.news-item{ border:1px solid #e6e6e6; border-radius:14px; padding:14px; background:#fff; }
.news-item h3{ margin:0 0 6px 0; }
.news-meta{ font-size:0.9rem; opacity:0.8; margin-bottom:8px; }
.muted{ opacity:0.75; }