
:root{
  --color-bg:#1A1D1F; --color-panel:#232728; --color-text:#EAEDED; --color-muted:#8A9296;
  --color-primary:#5CB3CC; --color-secondary:#B8C0BB; --color-border:#2F3335; --color-accent:#2B3E46;
  --radius:12px; --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;padding:0;line-height:1.6;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--color-primary);text-decoration:none} a:hover{opacity:.9}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-2)}
footer { padding: var(--space-1) 0; }
nav{border-bottom:1px solid var(--color-border);background:rgba(255,255,255,.02);backdrop-filter:saturate(120%) blur(4px)}
nav .container{display:flex;gap:var(--space-2);align-items:center;justify-content:space-between;padding:var(--space-2) 0}
nav a{color:var(--color-text)} nav a:hover{color:var(--color-primary)}
main{min-height:60vh}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-3);align-items:center}
.hero h1{font-size:clamp(2rem,3vw+1rem,2.75rem);line-height:1.2;margin:0 0 var(--space-2)}
.lead{font-size:1.125rem;color:var(--color-secondary)}
.btns{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.btn{padding:.75rem 1.25rem;border-radius:999px;border:1px solid var(--color-border);background:transparent;color:var(--color-text);display:inline-block;transition:all .2s ease}
.btn:hover{border-color:var(--color-secondary); transform:translateY(-1px)}
.btn.primary{background:var(--color-primary); color:#0e1316; border-color:transparent}
.btn.primary:hover{filter:saturate(110%)}
.btn.secondary{border-color:var(--color-secondary); color:var(--color-secondary)}
.muted{color:var(--color-muted)} .small{font-size:.95rem}
.logos{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;opacity:.85}
.logos img{height:28px;filter:grayscale(100%) brightness(120%);opacity:.8}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap: var(--space-4); border:1px solid var(--color-border); padding:var(--space-3); border-radius:var(--radius); box-shadow:0 0 0 1px rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,.25)}
.card {background: var(--color-panel);border: 1px solid var(--color-border);  padding: var(--space-3);  border-radius: var(--radius);  box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,.25);}
.card:hover {border-color: var(--color-primary);box-shadow: 0 0 0 1px rgba(92,179,204,.2), 0 12px 36px rgba(0,0,0,.35);}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap: var(--space-3);text-align:center}
.kpis .num{font-size:1.75rem;font-weight:700;color:var(--color-primary)}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.process .step{padding:var(--space-3); border:1px dashed var(--color-border); border-radius:var(--radius); background:rgba(255,255,255,.02)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.plan{background:var(--color-panel); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--space-3)}
.plan ul{padding-left:1.1rem}
.faq details{border:1px solid var(--color-border);background:var(--color-panel);border-radius:var(--radius);padding:var(--space-2);margin-bottom:var(--space-2)}
.roi{border:1px solid var(--color-border);background:var(--color-panel);border-radius:var(--radius);padding:var(--space-3)}
.roi input{width:100%;padding:.6rem .75rem;border-radius:8px;border:1px solid var(--color-border);background:#1b1f22;color:var(--color-text)}
.roi .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-2)}
.cta-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:space-between;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-accent)}
img,video{max-width:100%;border-radius:var(--radius)}
figure figcaption{color:var(--color-muted)}
footer{border-top:1px solid var(--color-border)}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid-3,.plans,.process,.kpis{grid-template-columns:1fr}
  .roi .row{grid-template-columns:1fr}
}

footer p{margin:0}

section.container{padding:var(--space-4) 0}

header.container{max-width:1200px;margin:0 auto;padding:var(--space-4) var(--space-2)}
