:root{
  --bg:#0A0F1F;
  --bg-2:#0E1530;
  --card:#121A37;
  --muted:#8A95B0;
  --brand:#0B3D91;
  --accent:#7C3AED;
  --text:#E8EDF7;
  --text-inv:#0B1630;
  --ring: rgba(124,58,237,0.45);
  --container: 1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,0.2), transparent 40%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  line-height:1.6;
}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

#skip a{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px;border-radius:8px}
#skip a:focus{left:10px;top:10px}

.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(10,15,31,0.6);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--brand));color:white;font-weight:800}
.brand-name{letter-spacing:0.3px}

.nav{display:flex;gap:16px}
.nav a{color:var(--text);opacity:.9;text-decoration:none;padding:10px 12px;border-radius:10px}
.nav a:hover, .nav a:focus{background:rgba(255,255,255,0.06)}
.cta-link{background:linear-gradient(135deg,var(--brand),var(--accent));color:white!important}

.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,0.2);color:var(--text);border-radius:10px;padding:6px 10px}

.hero{
  padding:80px 0 40px;
  background: radial-gradient(800px 400px at 10% -10%, rgba(11,61,145,0.25), transparent 40%);
}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.18;margin:0 0 12px}
.hero .lead{color:var(--muted);max-width:800px}

.grid{display:grid;gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){
  .nav{display:none;position:absolute;right:16px;top:64px;background:rgba(10,15,31,0.95);padding:12px;border-radius:12px;flex-direction:column;min-width:220px;border:1px solid rgba(255,255,255,.08)}
  .nav.open{display:flex}
  .nav-toggle{display:inline-block}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
}
.card{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:20px}
.card h3{margin-top:0}
.badge{display:inline-block;background:rgba(124,58,237,0.2);border:1px solid rgba(124,58,237,0.5);color:#D6CBFF;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.3px}

.btn{display:inline-block;background:linear-gradient(135deg,var(--brand),var(--accent));border:none;color:white;padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:600}
.btn:hover{filter:brightness(1.06)}
.btn:focus{outline:2px solid var(--ring);outline-offset:2px}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.2);color:var(--text)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.35)}
.small{font-size:14px;padding:6px 10px;border-radius:10px}

.section{padding:48px 0}
.section h2{font-size:clamp(22px,3.6vw,32px);margin-top:0}
.muted{color:var(--muted)}

.feature{display:flex;gap:16px}
.feature .icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpis .kpi{background:var(--card);padding:16px;border-radius:12px;text-align:center;border:1px solid rgba(255,255,255,0.06)}
.kpis .kpi span{display:block}
.kpis .kpi .num{font-weight:800;font-size:24px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}

.site-footer{margin-top:40px;border-top:1px solid rgba(255,255,255,0.08);background:rgba(10,15,31,0.5)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:30px 0}
.footer-grid h4{margin:0 0 8px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid a{color:var(--text);opacity:.9;text-decoration:none}
.brand-foot{font-weight:800;margin-bottom:8px}
.foot-muted{color:var(--muted)}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:12px 0;color:var(--muted)}

.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:rgba(10,15,31,0.96);border-top:1px solid rgba(255,255,255,0.12);padding:12px;z-index:60;display:none}
.cookie-content{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:70}
.cookie-dialog{background:var(--card);border:1px solid rgba(255,255,255,0.1);padding:20px;border-radius:16px;max-width:560px;width:92%}
.cookie-row{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid rgba(255,255,255,0.08);border-radius:10px;margin:8px 0;background:rgba(255,255,255,0.02)}
.cookie-close{position:absolute;top:20px;right:20px;background:transparent;border:none;color:var(--text);font-size:24px}
.cookie-modal[hidden]{display:none}

.hero .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
ul.checks{list-style:none;padding-left:0}
ul.checks li{padding-left:26px;position:relative;margin:8px 0}
ul.checks li::before{content:"✓";position:absolute;left:0;top:0;color:#B8FFB8;font-weight:800}

table.kv{width:100%;border-collapse:collapse}
table.kv td{border-bottom:1px solid rgba(255,255,255,0.1);padding:10px 0}