:root{
  --bg:#0f172a; --bg-2:#111827; --surface:#0b1220; --card:#111827;
  --text:#e5e7eb; --muted:#9ca3af; --brand:#22d3ee; --brand-2:#06b6d4;
  --accent:#f59e0b; --success:#10b981; --danger:#ef4444;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
  color:var(--text); background:
    radial-gradient(1200px 800px at 10% -10%, rgba(34,211,238,.15), transparent),
    radial-gradient(1000px 600px at 110% 10%, rgba(245,158,11,.10), transparent),
    var(--bg);
}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
.container{width: min(1100px, 92vw); margin: 0 auto}
.btn{display:inline-block; padding:.85rem 1.1rem; border-radius:12px; font-weight:600; text-decoration:none; border:1px solid transparent}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#071018; box-shadow:var(--shadow)}
.btn-outline{border-color:rgba(229,231,235,.2); color:var(--text)}
.badge{display:inline-flex; gap:.5rem; align-items:center; background:rgba(34,211,238,.12); color:var(--brand); border:1px solid rgba(34,211,238,.2); padding:.35rem .6rem; border-radius:999px; font-size:.85rem}
.nav{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.65));
  border-bottom:1px solid rgba(148,163,184,.12);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.nav a.logo{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.5px}
.nav a.logo img{width:32px; height:32px}
.nav ul{display:flex; gap:1rem; align-items:center; list-style:none; margin:0; padding:0}
.nav li a{display:block; padding:.5rem .6rem; border-radius:10px}
.nav li a:hover{background:rgba(148,163,184,.1); text-decoration:none}
.mobile-toggle{display:none}
@media (max-width: 840px){
  .nav ul{display:none}
  .mobile-toggle{display:inline-flex; gap:.5rem; align-items:center; padding:.5rem .8rem; border:1px solid rgba(148,163,184,.25); border-radius:10px}
  .nav.open ul{display:flex; position:absolute; left:0; right:0; top:56px; flex-direction:column; background:var(--bg-2); padding:1rem .8rem; border-bottom:1px solid rgba(148,163,184,.12)}
}
header.hero{padding: clamp(64px, 10vw, 110px) 0 56px}
.grid{display:grid; gap:1rem}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
@media (max-width: 860px){ .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(148,163,184,.12); border-radius:var(--radius); padding:1rem; box-shadow: var(--shadow)}
.card h3{margin:.3rem 0 .5rem}
.card p{color:var(--muted); margin:0}
.hero h1{font-size: clamp(32px, 4vw, 52px); margin:.6rem 0 0}
.hero p.lead{color:var(--muted); font-size: clamp(16px, 2.2vw, 19px)}
.hero .cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem}
.kpis{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.2rem}
.kpi{padding:.6rem .8rem; border:1px solid rgba(148,163,184,.15); border-radius:12px; background:rgba(255,255,255,.03); font-weight:600}
.section{padding: 56px 0}
.section h2{font-size: clamp(24px, 3vw, 32px); margin:0 0 .75rem}
.section .sub{color:var(--muted); margin-top:0}
.features .card{display:flex; gap:.8rem; align-items:flex-start}
.features .icon{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.2)}
.showcase img{width:100%; border-radius:14px; border:1px solid rgba(148,163,184,.15)}
blockquote.quote{margin:0; padding:1rem 1.2rem; background:rgba(255,255,255,.03); border-left:4px solid var(--brand-2); border-radius:10px}
footer{padding:36px 0; border-top:1px solid rgba(148,163,184,.12); background:rgba(0,0,0,.15)}
footer .cols{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:1rem}
@media (max-width: 860px){ footer .cols{grid-template-columns: 1fr} }
footer a{color:var(--muted)}
form .row{display:grid; grid-template-columns: 1fr 1fr; gap:1rem}
@media (max-width: 760px){ form .row{grid-template-columns:1fr} }
input, textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(148,163,184,.2);
  background:#0b1220; color:var(--text); outline:none;
}
input:focus, textarea:focus{border-color: var(--brand)}
label{font-size:.9rem; color:var(--muted); margin-bottom:.35rem; display:block}
.form-field{margin-bottom:1rem}
.notice{font-size:.9rem; color:var(--muted)}
.table{width:100%; border-collapse: collapse}
.table th, .table td{border-bottom:1px solid rgba(148,163,184,.12); text-align:left; padding:.6rem}
header .logo-type{font-weight:800; letter-spacing:.5px}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{position:static; width:auto; height:auto; padding:.6rem; background:var(--accent); color:#000}

/* Cookie banner */
.cc-banner{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  background: var(--card); border:1px solid rgba(148,163,184,.2); border-radius: 14px; padding: 1rem;
  box-shadow: var(--shadow); display:none;
}
.cc-banner.show{display:block}
.cc-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem}
.cc-actions .btn{padding:.6rem .8rem; border-radius:10px}
.cc-actions .btn-outline{border-color: rgba(148,163,184,.3)}
.cc-title{font-weight:700; margin:0 0 .4rem}
.cc-text{color:var(--muted); margin:0}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid rgba(148,163,184,.12)}
.toggle-row:last-child{border-bottom:none}
.switch{position:relative; width:46px; height:26px; display:inline-block}
.switch input{display:none}
.slider{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#374151; transition:.2s; border-radius:999px}
.slider:before{position:absolute; content:""; height:20px; width:20px; left:3px; top:3px; background:white; transition:.2s; border-radius:50%}
input:checked + .slider{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
input:checked + .slider:before{transform: translateX(20px)}
.badge-link{font-size:.9rem}