/* Base */
:root {
  --bg: #06080f;
  --surface: #0b1220;
  --surface2: #0f172a;
  --line: #334155;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --brand1: #f59e0b;
  --brand2: #fbbf24;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 520px at 8% -10%, rgba(167, 139, 250, 0.14), transparent 60%),
    radial-gradient(900px 440px at 92% -4%, rgba(251, 191, 36, 0.12), transparent 58%),
    var(--bg);
}
a { color: inherit; text-decoration: none; }

.container { max-width: 1140px; margin: 0 auto; padding: 28px 18px 56px; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(10,15,30,.94)); box-shadow: 0 10px 30px rgba(2,6,23,.35); margin-bottom: 12px; }
.btn { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; background: linear-gradient(120deg, var(--brand1), var(--brand2)); color: #111827; display: inline-flex; align-items: center; }
.btn-ghost { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; }
.input, select { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface2); color: #f1f5f9; width: 100%; }

.hero { border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 30px; background: linear-gradient(132deg,#0b1021 0%,#121a33 55%,#1b1f3a 100%); margin-bottom: 12px; }
.badge { display: inline-flex; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(251,191,36,.45); background: rgba(251,191,36,.15); color: #fde68a; font-weight: 700; }
.hero h1 { margin: 16px 0 10px; font-size: clamp(1.95rem,2.8vw,3rem); }
.hero p { color: #cbd5e1; }
.kpis { display: grid; grid-template-columns: repeat(3,minmax(120px,1fr)); gap: 10px; max-width: 640px; margin-top: 18px; }
.kpi { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px; background: rgba(15,23,42,.52); }
.kpi span { color: #cbd5e1; font-size: .82rem; display: block; }

.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.muted { color: var(--muted); }
.footer-links { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

.modal { position: fixed; inset: 0; display: none; background: rgba(2,6,23,.75); z-index: 50; padding: 16px; }
.modal.show { display: grid; place-items: center; }
.modal-card { width: min(1000px,96vw); border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(10,15,30,.98)); padding: 12px; }
.modal-frame { width:100%; height:70vh; border:1px solid var(--line); border-radius:10px; background:#0b1220; }

@media (max-width: 640px) { .kpis { grid-template-columns: 1fr; } .container { padding: 18px 12px 40px; } }

.pp-cookie-banner { position: fixed; inset: auto 0 0 0; z-index: 9999; padding: 12px; }
.pp-cookie-card { max-width: 980px; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(10,15,30,.98)); box-shadow: 0 12px 30px rgba(2,6,23,.55); padding: 12px; }
.pp-cookie-card p { color: #cbd5e1; margin: 6px 0 10px; }
.pp-cookie-options { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; color: #e2e8f0; }
.pp-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }