:root{
  --bg:#0b1220;
  --card: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.25);
  --accent:#0ea5e9;
  --text:#eef2ff;
  --muted:#94a3b8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.25), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(147,51,234,.2), transparent 60%),
    linear-gradient(180deg,#0b1220 0%, #05070d 100%);
}
a{color:var(--text); text-decoration:none}
a:hover{color:var(--accent)}
.site-header, .site-footer{
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--border);
}
.site-footer{position:static; margin-top:6rem; border-top:1px solid var(--border); border-bottom:none}
.site-header .brand{display:flex; align-items:center; gap:.75rem; font-weight:700}
.site-header{display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; backdrop-filter: saturate(180%) blur(20px); background:var(--card);}
.site-header nav{display:flex; gap:1rem; flex-wrap:wrap}
main{max-width:1100px; margin:0 auto; padding:2rem;}

.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center; margin:3rem 0;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.5rem;
  box-shadow:0 8px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(16px) saturate(140%);
}
.glow{box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(14,165,233,.25)}
h1,h2{margin:.2rem 0 1rem; line-height:1.1}
h1{font-size:clamp(2rem, 2vw + 1.6rem, 3.2rem)}
h2{font-size:1.6rem}
p{color:var(--muted); line-height:1.7}
.cta{display:flex; gap:.75rem; margin-top:1.25rem}
.btn{
  display:inline-block; padding:.8rem 1.1rem; border-radius:14px;
  border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  font-weight:600; letter-spacing:.2px;
}
.btn.primary{background:linear-gradient(180deg, rgba(14,165,233,.7), rgba(14,165,233,.4)); border-color:rgba(14,165,233,.6)}
.grid{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.kpi{display:flex; gap:1rem; align-items:center}
.kpi .num{font-size:1.8rem; font-weight:800}
.media-mock{
  aspect-ratio: 16/10; border-radius:18px; background:radial-gradient(75% 60% at 50% 0%, rgba(255,255,255,.25), transparent),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.badge{
  position:absolute; top:1rem; right:1rem; padding:.4rem .6rem; border-radius:999px; font-size:.8rem;
  background:linear-gradient(180deg, rgba(34,197,94,.45), rgba(34,197,94,.25)); border:1px solid rgba(34,197,94,.5)
}
.two-col{display:grid; gap:1.2rem; grid-template-columns:1fr 1fr}
.feature{display:flex; gap:.8rem}
.feature i{width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); display:inline-flex; align-items:center; justify-content:center; font-style:normal}
.site-footer{display:flex; justify-content:space-between; align-items:center; padding:1.25rem 2rem; background:var(--card); backdrop-filter: blur(16px)}
.cookie-banner{position:fixed; inset:auto 1rem 1rem auto; max-width:360px; padding:1rem; border-radius:16px; background:var(--card); border:1px solid var(--border); backdrop-filter: blur(16px)}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
}