:root{
  --bg:#0f172a; /* slate-900 */
  --card:#111827; /* gray-900 */
  --muted:#94a3b8; /* slate-400 */
  --text:#e5e7eb; /* gray-200 */
  --accent:#22c55e; /* green-500 */
  --accent-2:#60a5fa; /* blue-400 */
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;line-height:1.6}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.btn{display:inline-block;background:var(--accent);color:#031b06;padding:12px 18px;border-radius:14px;font-weight:700;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--text)}
.header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(10px);background:rgba(15,23,42,.65);border-bottom:1px solid #1f2937;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav a.brand{font-weight:900;letter-spacing:.3px;font-size:20px;color:#fff}
.nav .links a{margin-left:18px;color:#cbd5e1}
.hero{padding:70px 0 20px;border-bottom:1px solid #1f2937;background:radial-gradient(1200px 600px at 80% -30%, rgba(34,197,94,.15), transparent 60%), radial-gradient(1200px 600px at 0% -40%, rgba(96,165,250,.12), transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 10px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid #1f2937;border-radius:20px;padding:20px}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.section{padding:42px 0}
.section h2{font-size:28px;margin:0 0 12px}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #1f2937;background:#0b1224;padding:6px 10px;border-radius:999px;color:#a5b4fc;font-weight:600;font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:10px}
.kpi{background:#0b1224;border:1px solid #1f2937;padding:16px;border-radius:16px;text-align:center}
.kpi .num{font-size:26px;font-weight:900}
.footer{padding:28px 0;border-top:1px solid #1f2937;color:#94a3b8}
.hero-img{width:100%;aspect-ratio:4/3;border-radius:20px;border:1px solid #1f2937;background:#0b1224 url('../img/hero-placeholder.svg') center/cover no-repeat;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.card img, .project{width:100%;aspect-ratio:4/3;border-radius:14px;border:1px solid #1f2937;background:#0b1224 url('../img/project-placeholder.svg') center/cover no-repeat}
.table{width:100%;border-collapse:collapse;border:1px solid #1f2937;border-radius:14px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid #1f2937;text-align:left}
.form{display:grid;gap:12px}
input,textarea{width:100%;background:#0b1224;border:1px solid #1f2937;color:#e5e7eb;padding:12px;border-radius:12px}
label{font-size:14px;color:#cbd5e1}
.alert{padding:12px;border-radius:12px}
.alert-success{background:#052e16;color:#bbf7d0;border:1px solid #14532d}
.alert-error{background:#420a0a;color:#fecaca;border:1px solid #7f1d1d}
.cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1{font-size:38px}
}