/* ========== Base Reset & Variables ========== */
:root{
  --bg:#0f172a;          /* slate-900 */
  --bg-2:#0b1226;        /* slightly darker */
  --card:#111827;        /* gray-900 */
  --text:#e5e7eb;        /* gray-200 */
  --muted:#9ca3af;       /* gray-400 */
  --brand:#22d3ee;       /* cyan-400 */
  --brand-2:#60a5fa;     /* blue-400 */
  --accent:#34d399;      /* emerald-400 */
  --warning:#f59e0b;     /* amber-500 */
  --error:#ef4444;       /* red-500 */
  --ring: 0 0 0 4px rgba(34,211,238,.2);
}

/* Smooth scrolling */
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 80% -10%, rgba(96,165,250,.15), transparent 60%),
              radial-gradient(900px 500px at -10% 10%, rgba(34,211,238,.15), transparent 60%), var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Global containers */
.container{max-width:1150px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Header */
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: saturate(180%) blur(8px);
  background: linear-gradient( to bottom, rgba(15,23,42,.85), rgba(15,23,42,.45) );
  border-bottom:1px solid rgba(148,163,184,.12);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.logo svg{width:34px;height:34px;filter: drop-shadow(0 6px 12px rgba(34,211,238,.25));}
.brand{font-weight:800;letter-spacing:.2px}
.brand span{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}

nav a{color:var(--text);text-decoration:none;margin:0 10px;padding:8px 12px;border-radius:12px}
nav a:hover, nav a:focus{outline:none;box-shadow: var(--ring);background: rgba(148,163,184,.08)}
nav .cta{background:linear-gradient(90deg,var(--brand),var(--accent));color:#001b1b;font-weight:700}
nav .cta:hover{transform: translateY(-1px);}

/* Hero */
.hero{display:grid;gap:24px;grid-template-columns: 1.2fr .8fr;align-items:center}
.hero h1{font-size: clamp(28px, 4vw, 44px);line-height:1.15;margin:.2em 0 .3em}
.hero p{color:var(--muted);font-size: clamp(16px, 1.4vw, 18px)}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.badge{border:1px solid rgba(148,163,184,.18);padding:8px 12px;border-radius:999px;font-size:13px;color:var(--muted);background:rgba(2,6,23,.5)}
.kpis{display:flex;gap:22px;flex-wrap:wrap}
.kpi{background:linear-gradient(180deg, rgba(2,6,23,.6), rgba(2,6,23,.2));border:1px solid rgba(148,163,184,.12);padding:16px 18px;border-radius:16px;min-width:150px}
.kpi .n{font-size:20px;font-weight:800;color:var(--text)}
.kpi .l{font-size:12px;color:var(--muted)}
.hero-visual{
  min-height:280px;border-radius:18px;border:1px solid rgba(148,163,184,.14);
  background: conic-gradient(from 220deg, rgba(96,165,250,.2), rgba(34,211,238,.2), rgba(52,211,153,.2), rgba(96,165,250,.2));
  position:relative; overflow:hidden;
}
/* floating accents */
.dot{position:absolute;width:9px;height:9px;border-radius:999px;background:var(--brand);filter:blur(.2px);opacity:.9;animation: float 9s ease-in-out infinite}
.dot.d1{top:22%;left:12%}
.dot.d2{top:42%;left:72%;animation-duration:11s}
.dot.d3{top:72%;left:32%;animation-duration:13s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Cards */
.card{background:linear-gradient(180deg, rgba(2,6,23,.6), rgba(2,6,23,.2));
  border:1px solid rgba(148,163,184,.12);border-radius:18px;padding:20px}
.card:hover{transform:translateY(-2px);transition:.25s ease;box-shadow:0 16px 40px -20px rgba(0,0,0,.6)}

/* Lists */
ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding-left:28px;margin:8px 0;position:relative}
ul.check li:before{content:"";position:absolute;left:0;top:10px;width:14px;height:14px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--brand)); box-shadow: 0 0 12px rgba(52,211,153,.35)}

/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;color:#001b1b;
  background:linear-gradient(90deg,var(--brand),var(--accent));font-weight:700;border:0}
.btn.secondary{background:transparent;color:var(--text);border:1px solid rgba(148,163,184,.22)}
.btn:hover{transform:translateY(-1px)}

/* Footer */
footer{border-top:1px solid rgba(148,163,184,.12);background: rgba(2,6,23,.35)}
.footer-grid{display:grid;gap:24px;grid-template-columns:2fr 1fr 1fr}
@media (max-width:900px){.hero{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}

/* Forms */
input, textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.35);color:var(--text)}
input:focus, textarea:focus{outline:none;box-shadow:var(--ring);border-color: var(--brand)}
label{font-size:13px;color:var(--muted)}
.form-row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:700px){.form-row{grid-template-columns:1fr}}
.success{display:none;padding:12px;border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.1);border-radius:12px;margin-top:12px}

/* Utility */
.muted{color:var(--muted)}
.small{font-size:13px}
hr.sep{border:0;border-top:1px dashed rgba(148,163,184,.18);margin:28px 0}

/* Cookie Banner */
.cookie{position:fixed;inset:auto 0 18px 0;margin:auto;max-width:960px;background:var(--card);border:1px solid rgba(148,163,184,.18);
  border-radius:16px;padding:16px;display:none;z-index:99}
.cookie .actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie .actions button{cursor:pointer}
.badge.pulse{position:relative}
.badge.pulse::after{content:"";position:absolute;inset:-2px;border-radius:999px;border:2px solid rgba(34,211,238,.4);animation:ping 1.8s infinite}
@keyframes ping{0%{transform:scale(.9);opacity:.9}80%{transform:scale(1.15);opacity:0}100%{opacity:0}}

/* Links */
a.inline{color:var(--brand-2);text-underline-offset:3px}
a.inline:hover{text-decoration:underline}

/* Table */
table{width:100%;border-collapse:collapse}
td,th{padding:12px;border-bottom:1px solid rgba(148,163,184,.12);text-align:left}
th{color:var(--muted);font-weight:600}