/* Clean futuristic refresh for the cloned Telemetrix site. */
:root {
  --navy: #07111f;
  --blue-mid: #12314f;
  --blue-accent: #00a7d8;
  --blue-light: #7ee7ff;
  --off-white: #f6f9fc;
  --white: #ffffff;
  --muted: rgba(226, 238, 247, 0.72);
  --border-d: rgba(126, 231, 255, 0.16);
  --border-l: rgba(15, 60, 92, 0.12);
  --prisma-green: #19c37d;
  --prisma-amber: #f6b44b;
  --ink-soft: #3d5165;
}

html {
  background: #f6f9fc;
}

body {
  background:
    linear-gradient(180deg, #07111f 0, #081827 36rem, #f6f9fc 36rem),
    #f6f9fc;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(126, 231, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 231, 255, 0.12) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000 0, transparent 70%);
  z-index: -1;
}

nav {
  background: rgba(7, 17, 31, 0.76) !important;
  border-bottom: 1px solid rgba(126, 231, 255, 0.18) !important;
  box-shadow: 0 18px 60px rgba(3, 10, 20, 0.22);
}

.nav-logo img {
  height: 58px !important;
}

.nav-links a {
  color: rgba(241, 248, 252, 0.82) !important;
}

.nav-cta,
.btn-primary {
  background: linear-gradient(135deg, #00a7d8, #19c37d) !important;
  border-color: transparent !important;
  color: #04111c !important;
  box-shadow: 0 14px 34px rgba(0, 167, 216, 0.22);
}

.btn-secondary {
  border-color: rgba(126, 231, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(25, 195, 125, 0.24);
}

#hero {
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 167, 216, 0.18), transparent 26rem),
    linear-gradient(135deg, #07111f 0%, #0b2237 52%, #06101b 100%) !important;
}

#hero::before,
#como-funciona::before,
#cta::before,
#cta-s::before,
#ecossistema::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 48%, rgba(126, 231, 255, 0.13) 48% 48.2%, transparent 48.2%),
    linear-gradient(65deg, transparent 0 62%, rgba(25, 195, 125, 0.11) 62% 62.2%, transparent 62.2%);
  background-size: 420px 420px, 520px 520px;
  opacity: 0.42;
}

.hero-badge,
.hero-label,
.eco-optional-badge,
.optional-service-badge {
  background: rgba(126, 231, 255, 0.1) !important;
  border: 1px solid rgba(126, 231, 255, 0.34) !important;
  color: #bdf4ff !important;
}

.tag {
  color: #00a7d8;
}

#problema,
#principios,
#resultados,
#blog,
#deteccoes,
#screenshots,
#lgpd {
  background: #f6f9fc !important;
}

#metodo,
#ecossistema,
#posicionamento,
#como-funciona,
#cta-s {
  background:
    linear-gradient(180deg, #07111f 0%, #0b1d2e 100%) !important;
}

.stats-bar,
#mvv {
  background: linear-gradient(135deg, #102c46, #093527) !important;
}

.problema-visual,
.eco-card,
.mvv-card,
.cf-step,
.step-card {
  border-radius: 8px !important;
}

.principio-card,
.resultado-card,
.blog-card,
.cliente-card,
.det-card,
.screenshot-slot,
.lgpd-inner,
.lgpd-box {
  border-radius: 8px !important;
  border-color: rgba(12, 55, 86, 0.12) !important;
  box-shadow: 0 14px 44px rgba(8, 24, 38, 0.07) !important;
}

.principio-card:hover,
.resultado-card:hover,
.blog-card:hover,
.cliente-card:hover,
.det-card:hover,
.eco-card.secondary:hover,
.step-card:hover,
.cf-step:hover {
  border-color: rgba(0, 167, 216, 0.48) !important;
  box-shadow: 0 22px 70px rgba(0, 167, 216, 0.18) !important;
}

.eco-card.secondary,
.step-card,
.cf-step,
.mvv-card {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(126, 231, 255, 0.14) !important;
  backdrop-filter: blur(14px);
}

.eco-card.featured {
  background: linear-gradient(135deg, #0ea5c7 0%, #19a974 100%) !important;
  color: #fff;
  box-shadow: 0 24px 80px rgba(0, 167, 216, 0.26) !important;
}

.eco-card p,
.mvv-card p,
.cf-step p,
.step-card p {
  color: rgba(239, 248, 251, 0.72) !important;
}

.eco-icon,
.icon-3d,
.det-icon {
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(0, 167, 216, 0.22) !important;
}

.ic-camera,
.ic-prisma,
.ic-frota,
.det-icon {
  background: linear-gradient(145deg, #7ee7ff, #00a7d8 48%, #19c37d) !important;
}

.badge,
.eco-badge,
.blog-cat,
.soon,
.nav-cliente-btn {
  border-radius: 8px !important;
}

.stat-value,
#hero h1 em {
  color: #7ee7ff !important;
  text-shadow: 0 0 28px rgba(126, 231, 255, 0.26);
}

.problema-text p,
#principios .sub,
#resultados .sub,
#blog .sub,
.det-card p,
.resultado-card p,
.principio-card p,
.blog-card p,
#deteccoes p.sub,
#screenshots p.sub {
  color: var(--ink-soft) !important;
}

#suporte {
  background:
    radial-gradient(circle at 76% 28%, rgba(0, 167, 216, 0.18), transparent 20rem),
    linear-gradient(180deg, #07111f 0%, #0b1d2e 100%) !important;
}

#suporte .suporte-text h2,
#suporte .suporte-card h3,
#suporte .suporte-ch-info h4 {
  color: #ffffff !important;
}

#suporte .suporte-text p,
#suporte .suporte-card p,
#suporte .suporte-ch-info span {
  color: rgba(238, 248, 252, 0.84) !important;
}

#suporte .suporte-ch,
#suporte .suporte-card {
  background: rgba(255, 255, 255, 0.085) !important;
  border: 1px solid rgba(126, 231, 255, 0.22) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.18);
}

#suporte .sla-pill {
  background: rgba(126, 231, 255, 0.14) !important;
  border: 1px solid rgba(126, 231, 255, 0.32) !important;
  color: #dffaff !important;
}

#suporte .btn-access {
  background: linear-gradient(135deg, #7ee7ff, #19c37d) !important;
  border-color: transparent !important;
  color: #04111c !important;
  font-weight: 800 !important;
  box-shadow: 0 16px 36px rgba(25, 195, 125, 0.24);
}

#suporte .btn-access:hover {
  box-shadow: 0 20px 44px rgba(0, 167, 216, 0.28) !important;
}

.optional-service-note {
  margin-top: 1.1rem;
  padding: 1rem;
  border: 1px solid rgba(126, 231, 255, 0.25);
  border-radius: 8px;
  background: rgba(126, 231, 255, 0.08);
  color: rgba(241, 248, 252, 0.82);
  font-size: 0.82rem;
}

.optional-service-note strong {
  color: #bdf4ff;
}

.optional-service-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.6rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.optional-service-strip {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(126, 231, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(241, 248, 252, 0.8);
  max-width: 680px;
}

.optional-service-strip strong {
  color: #bdf4ff;
}

@media (max-width: 768px) {
  .nav-logo img {
    height: 46px !important;
  }

  .nav-links.open {
    background: rgba(7, 17, 31, 0.98) !important;
  }

  .eco-card,
  .principio-card,
  .resultado-card,
  .blog-card,
  .cliente-card,
  .det-card {
    padding: 1.35rem !important;
  }
}