/* Dark theme - Capmetrica */
:root{
  --bg:#071421;
  --surface:#0b2430;
  --muted:#9aa7b2;
  --accent:#2bb0ff;
  --glass: rgba(255,255,255,0.04);
  --max-width:1100px;
  --radius:12px;
  --gap:1.25rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,var(--bg),#021017);
  color:#e6f0f6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.container{width:90%; max-width:var(--max-width); margin:0 auto; padding:2rem 0;}

/* Skip link */
.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;padding:8px 12px;background:#0b2430;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.6)}

/* Header */
.site-header{backdrop-filter:blur(6px); background:linear-gradient(180deg, rgba(11,36,48,0.55), rgba(11,36,48,0.35)); border-bottom:1px solid rgba(255,255,255,0.03); position:sticky; top:0; z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0}
.brand{display:flex;align-items:center;text-decoration:none}
.logo{height:48px;width:auto;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.6)}

/* Nav */
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px;border-radius:8px;cursor:pointer}
.primary-nav{display:flex}
.nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{color:var(--muted);text-decoration:none;padding:0.45rem 0.65rem;border-radius:8px}
.nav-list a:hover, .nav-list a:focus{background:rgba(43,176,255,0.08); color:var(--accent)}

/* Hero */
.hero{padding:3.5rem 0; border-bottom:1px solid rgba(255,255,255,0.02);}
.hero-inner{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero-copy{flex:1 1 420px}
.hero-copy h1{font-size:2.1rem;margin:0 0 0.6rem;color:#dff6ff;text-shadow:0 6px 24px rgba(43,176,255,0.06)}
.lead{color:var(--muted);margin-bottom:1rem}
.cta-row{display:flex;gap:0.75rem}
.btn{display:inline-block;padding:0.6rem 0.9rem;border-radius:10px;text-decoration:none;border:1px solid transparent;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),#66ddff);color:#042;box-shadow:0 10px 30px rgba(43,176,255,0.06);border:transparent}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(43,176,255,0.08)}

/* KPIs */
.kpis{display:flex;gap:1rem;flex-direction:column;align-items:flex-end}
@media(min-width:800px){ .kpis{flex-direction:row} }
.kpi{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:14px 18px; border-radius:10px; text-align:center; min-width:110px}
.kpi span{display:block;font-weight:700;font-size:1.15rem;color:#e8fbff}
.kpi small{display:block;color:var(--muted)}

/* Services grid */
.grid{display:grid;gap:1rem}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1rem}
.service{background:var(--surface);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(2,8,12,0.6);transition:transform 220ms ease}
.service:hover{transform:translateY(-6px)}


.service h3{margin-top:0;color:#dff6ff}

/* About teaser */
.about-teaser{padding:2rem 0}
.teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:center}
.testimonial{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* Content */
.content{background:transparent}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.team-card{background:var(--surface);padding:18px;border-radius:12px;text-align:center}
.team-card img{width:88px;height:88px;border-radius:12px;object-fit:cover;margin-bottom:10px}

/* Services details */
.service-details{display:flex;flex-direction:column;gap:18px}
.service-full{display:flex;gap:18px;align-items:flex-start;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px}
.service-full.reverse{flex-direction:row-reverse}
.service-icon svg{width:64px;height:64px;fill:rgba(255,255,255,0.06)}
.service-body h2{margin-top:0}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 380px;gap:32px}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.contact-form{display:flex;flex-direction:column;gap:12px}
.contact-form input, .contact-form textarea{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:var(--muted)}
.contact-info .map-placeholder{height:200px;background:linear-gradient(90deg,#062b36,#032026);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Footer */
.site-footer{padding:18px 0;background:transparent;border-top:1px solid rgba(255,255,255,0.02)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}

/* Responsive */
@media(max-width:800px){
  .nav-toggle{display:inline-block}
  .primary-nav{position:absolute;right:14px;top:64px;background:var(--surface);padding:10px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.7);display:none}
  .primary-nav.show{display:block}
  .nav-list{flex-direction:column;gap:6px}
  .hero-inner{flex-direction:column;align-items:flex-start}
  .teaser-grid{grid-template-columns:1fr}
}

a{color:var(--accent)}
small{color:var(--muted)}