:root{
  --bg: #0f1220;
  --surface: #171a2b;
  --surface-2:#1f2236;
  --text: #e7e9f1;
  --muted:#a7acc2;
  --primary:#6a5ae0;
  --primary-2:#8f85ff;
  --accent:#2ed0ff;
  --success:#22c55e;
  --ring: #3f47ff44;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: Inter, Segoe UI, Roboto, system-ui, -apple-system, Helvetica, Arial, sans-serif; color:var(--text); background:linear-gradient(180deg,#0b0e1a, var(--bg) 20%);} 
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg,var(--surface), var(--surface-2));}
.site-header{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(8px); background:rgba(15,18,32,.6); border-bottom:1px solid #23263b; z-index:10}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand-name{font-weight:700;letter-spacing:.2px}
.nav .menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.nav-toggle{display:none;background:none;border:1px solid #2a2f4a;border-radius:8px;color:var(--text);padding:6px 10px}
.cta-group{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 18px;border-radius:10px;border:1px solid transparent; text-decoration:none; cursor:pointer; transition:.2s ease; font-weight:600}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,var(--primary), var(--primary-2)); color:#fff; box-shadow: var(--shadow)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:transparent; border-color:#2a2f4a; color:var(--text)}
.btn-secondary:hover{border-color:#3a4062}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text)}
.btn.full{width:100%}
.lead{color:var(--muted); font-size:1.125rem; line-height:1.6}
.hero{padding-top:64px}
.grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center}
.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:20px}
.cards .card{background:var(--surface); border:1px solid #23263b; border-radius:var(--radius); padding:22px; box-shadow: var(--shadow)}
.card.featured{background:linear-gradient(180deg,#1b1f33, var(--surface)); border-color:#3f47ff77}
.card .badge{display:inline-block; background: #2a2f4a; color:#cfd4ff; padding:6px 10px; border-radius:50px; font-size:.8rem; margin-bottom:8px}
.icon{width:40px;height:40px;color:var(--accent)}
.icon svg{width:100%;height:100%;}
.kpis{display:flex; gap:18px; margin-top:20px}
.kpis strong{font-size:1.4rem}
.kpis span{display:block; color:var(--muted); font-size:.9rem}
.micro{color:#98a0b9; font-size:.85rem}
.device{background:var(--surface); border-radius:16px; border:1px solid #23263b; padding:14px}
.device-bar{height:10px; background:#2a2f4a; border-radius:6px; margin-bottom:10px}
.device-screen{background:#0f1220; border:1px solid #23263b; border-radius:12px; padding:18px}
.code-line{height:10px; background:linear-gradient(90deg, #2a2f4a, #3a4062); border-radius:6px; margin:10px 0}
.code-line.w30{width:30%}
.code-line.w40{width:40%}
.code-line.w55{width:55%}
.code-line.w70{width:70%}
.code-line.w85{width:85%}
.logos{display:grid; grid-template-columns: repeat(4, minmax(120px,1fr)); gap:12px; align-items:center}
.logo{display:flex;align-items:center;gap:10px; color:var(--muted); background:var(--surface); border:1px solid #23263b; padding:10px 12px; border-radius:12px}
.pricing .price{font-size:1.25rem; margin:8px 0 12px}
.pricing .price span{font-size:1.8rem; font-weight:800}
.list{padding-left:18px; color:var(--muted)}
.faq-item{background:var(--surface); border:1px solid #23263b; border-radius:var(--radius); padding:14px 18px; margin-bottom:10px}
.form input,.form textarea{width:100%; margin-top:6px; margin-bottom:12px; padding:12px 12px; border-radius:10px; border:1px solid #2a2f4a; background:#0f1220; color:var(--text)}
.form input:focus,.form textarea:focus{outline:2px solid var(--ring); border-color:#3f47ff}
.site-footer{border-top:1px solid #23263b; padding:26px 0; background: #0b0e1a}
.footer-inner{display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:12px}
.footer-inner nav{display:flex; gap:16px}
.brand-row{display:flex; gap:10px; align-items:center}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:8px; top:8px; width:auto; height:auto; background:#000; color:#fff; padding:8px; z-index:999}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

h1{font-size:clamp(2rem, 3.5vw, 3rem); line-height:1.1; margin:.2em 0 .4em}
h2{font-size:1.8rem; margin:.2em 0 .6em}
h3{font-size:1.2rem; margin:.2em 0 .4em}
.grad{background:linear-gradient(90deg,var(--primary-2), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}

@media (max-width: 920px){
  .grid-2{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .nav .menu{display:none}
  .nav-toggle{display:inline-flex}
  .footer-inner{grid-template-columns: 1fr; justify-items:center; text-align:center}
}