:root{
  --bg:#0b0c10;
  --panel:#121317;
  --txt:#e5e7eb;
  --muted:#9ca3af;
  --accent:#e11d48; /* crimson/red */
  --accent-2:#ef4444;
  --ok:#10b981;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.6;
}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
header{
  position:sticky; top:0; z-index:10; background:rgba(11,12,16,.9);
  backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid #1f2937;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{
  display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.3px;
}
.logo-mark{
  width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid; place-items:center; color:#fff; font-weight:900;
  box-shadow:0 6px 16px rgba(225,29,72,.35);
}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav a{padding:8px 12px; border-radius:10px}
nav a.active, nav a:hover{background:rgba(225,29,72,.12)}
.btn{
  display:inline-block; background:var(--accent); color:#fff; padding:12px 18px; border-radius:12px; font-weight:700; letter-spacing:.3px;
  border:1px solid transparent; box-shadow:0 8px 18px rgba(225,29,72,.25);
}
.btn:hover{filter:brightness(1.05); text-decoration:none}
.hero{
  position:relative; overflow:hidden; background:
    radial-gradient(1200px 500px at 80% -10%, rgba(225,29,72,.18), transparent 60%),
    radial-gradient(1000px 400px at 10% -10%, rgba(239,68,68,.15), transparent 60%),
    linear-gradient(180deg, #0b0c10, #0b0c10);
  border-bottom:1px solid #1f2937;
}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; padding:64px 0}
.hero h1{font-size:clamp(28px,3.8vw,46px); margin:0 0 12px; line-height:1.2}
.hero p.lead{color:var(--muted); font-size:clamp(15px,2vw,18px); margin:0 0 18px}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 26px}
.badge{border:1px solid #272b33; background:#121317; padding:8px 12px; border-radius:999px; font-size:13px; color:#cbd5e1}
.panel{
  background:var(--panel); border:1px solid #1f2937; border-radius:20px; padding:18px;
}
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#0e0f13; border:1px solid #1f2937; border-radius:18px; padding:18px}
.card h3{margin:6px 0 8px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:12px}
.kpi{background:#0e0f13; border:1px solid #1f2937; border-radius:16px; padding:16px; text-align:center}
.kpi strong{font-size:22px; display:block; color:#fff}
.kpi span{color:#9ca3af; font-size:13px}
.section{padding:44px 0}
.section h2{font-size:clamp(22px,3vw,30px); margin:0 0 12px}
.section p.sub{color:var(--muted); margin:0 0 16px}
.list-clean{margin:0; padding-left:18px}
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.gallery a, .gallery img{display:block}
.gallery img{width:100%; height:160px; object-fit:cover; border-radius:14px; border:1px solid #1f2937}

/* Responsive image visibility */
.mobile-only{display:none}
.all-devices{display:block}
@media (max-width: 768px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .mobile-only{display:block}
}

/* Footer */
footer{border-top:1px solid #1f2937; margin-top:30px; background:#0b0c10}
.foot{
  display:grid; gap:18px; grid-template-columns:2fr 1fr 1fr; padding:24px 0;
}
.foot small{color:#9ca3af}
.foot a{color:#cbd5e1}
.legal{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px}

/* Forms & tables (policy pages) */
.policy h3{margin:18px 0 8px}
.policy p, .policy li{color:#cbd5e1}
.policy ul{padding-left:20px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border:1px solid #1f2937; padding:10px; text-align:left}
.table th{background:#0e0f13}
