:root{
  --bg:#0f172a;
  --card:#0b1220;
  --muted:#9aa4b2;
  --text:#e6eaf0;
  --brand:#6ee7b7;
  --brand-2:#60a5fa;
  --accent:#fca5a5;
  --radius:16px;
  --container:1100px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(96,165,250,.15), transparent),
              radial-gradient(1000px 500px at -20% 10%, rgba(110,231,183,.15), transparent),
              var(--bg);
  color:var(--text); line-height:1.6;
}

h1,h2,h3{font-family:"Playfair Display",serif; line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.4rem,3.2vw,2rem)}
h3{font-size:clamp(1.2rem,2.6vw,1.6rem)}
p{margin:.4rem 0 1rem}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(100%, var(--container)); margin-inline:auto; padding:0 1rem}
.btn{
  display:inline-block; padding:.8rem 1.1rem; border-radius:999px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#0b1220; font-weight:700; text-decoration:none; border:none; cursor:pointer;
  box-shadow:var(--shadow)
}
.btn:hover{filter:brightness(1.05)}
.btn-outline{
  background:transparent; border:1px solid var(--brand-2); color:var(--text)
}
.btn-small{padding:.5rem .8rem; font-weight:600}

.site-header{position:sticky; top:0; backdrop-filter: blur(10px); background:rgba(11,18,32,.6); z-index:50; border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.logo{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.5px}
.logo img{display:block}
.menu{display:flex; gap:1rem; align-items:center}
.menu a{padding:.6rem .4rem; border-radius:10px}
.menu a.btn{text-decoration:none}
.nav-toggle{display:none; font-size:1.6rem; background:none; border:none; color:var(--text)}

.hero{padding: clamp(2rem, 6vw, 4rem) 0}
.hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.badge{display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; background:rgba(255,255,255,.06); padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.08)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)
}
.card h3{margin:.2rem 0 .4rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.section{padding: clamp(2rem, 6vw, 4rem) 0}
.section-title{margin-bottom:1rem}
.list{list-style:none; padding:0; margin:0}
.list li{margin:.3rem 0}
.icon{display:inline-flex; width:16px; height:16px; align-items:center; justify-content:center}
.bullets{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:.8rem}
.bullets li{padding-left:.2rem}

.feature{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center}
.feature .illustration{min-height:260px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(400px 200px at 70% 0%, rgba(110,231,183,.18), transparent),
             linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow:var(--shadow); padding:1rem}

.quote{font-style:italic; border-left:3px solid var(--brand); padding-left:1rem; color:#d9e3ee}

.site-footer{background:#0b1220; border-top:1px solid rgba(255,255,255,.06); padding:2rem 0; margin-top:2rem}
.tiny{font-size:.85rem; color:var(--muted)}

.cookie{
  position:fixed; bottom:1rem; right:1rem; left:1rem; max-width:560px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:#0b1220; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.7rem 1rem;
  box-shadow:var(--shadow)
}

.form{display:grid; gap:.8rem}
input, textarea, select{
  width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.15);
  background:#0b1220; color:var(--text)
}

.table{width:100%; border-collapse:collapse; overflow:auto}
.table th, .table td{padding:.6rem .8rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left}

.hero-cta{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:1rem}

.tag{display:inline-block; padding:.25rem .6rem; border-radius:999px; background:rgba(96,165,250,.18); border:1px solid rgba(96,165,250,.3); font-size:.8rem; margin:.2rem .2rem 0 0}
.tags{margin-top:.6rem}

@media (max-width: 900px){
  .hero .wrap, .feature, .grid-2, .grid-3{grid-template-columns:1fr}
  .menu{display:none; position:absolute; right:1rem; top:64px; background:#0b1220; padding:1rem; border-radius:12px; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); flex-direction:column; gap:.4rem}
  .nav-toggle{display:block}
  .kpis{grid-template-columns:1fr 1fr}
}