/* =========================================================
   CNX Projetos e Tecnologia · tema escuro
   Leva o visual da abertura para todas as seções. Para voltar ao tema claro,
   remova o <link> deste arquivo nas páginas.
   ========================================================= */

:root {
  --ink: #F2F6FB;
  --ink-soft: #A9B7CB;
  --line: rgba(232, 237, 243, 0.10);
  --mist-100: rgba(232, 237, 243, 0.06);
  --bg-0: #030508;              /* mesmo preto da abertura */
  --bg-1: #060A12;              /* seções alternadas */
  --card: #0A0E16;
  --card-line: rgba(232, 237, 243, 0.09);
  --glow: 0 0 0 1px rgba(76,192,234,.18), 0 18px 44px rgba(0,0,0,.5), 0 0 48px rgba(27,163,214,.12);
}
body { background: var(--bg-0); color: var(--ink); }
a { color: var(--cyan-300); }
a:hover { color: var(--white); }

/* seções: preto com a grade fina e um brilho ciano no topo */
.section { position: relative; isolation: isolate; background: var(--bg-0); }
.section--mist { background: var(--bg-1); }
.section--dark { background: var(--bg-0); }
.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(232,237,243,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(232,237,243,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 80%);
}
.section::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 0; width: min(900px, 90vw); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(76,192,234,.35), transparent);
}
.section-head .eyebrow, .eyebrow { color: var(--cyan-300); }
.eyebrow::before { background: var(--white); }
.section-head p { color: var(--ink-soft); }

/* cartões: vidro escuro, borda fina e brilho ciano no hover */
.solution, .service, .plan, .gear, .pillar, a.channel, .channel, .form-card, .feature, .related__item {
  background: var(--card); border-color: var(--card-line); box-shadow: none; color: var(--ink);
}
.solution, .service, .plan, .gear, .pillar, a.channel, .feature, .related__item {
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.solution:hover, .service:hover, .plan:hover, .gear:hover, .pillar:hover, a.channel:hover, .feature:hover, .related__item:hover {
  border-color: rgba(76,192,234,.4); box-shadow: var(--glow); color: var(--ink);
}
.service__icon, .plan__icon, .channel__icon, .related__icon, .pillar__icon, .feature__icon {
  background: rgba(27,163,214,.14); color: var(--cyan-300);
}
.tags li { background: rgba(232,237,243,.07); color: var(--on-dark-soft); }

/* destaques: azul-marinho com borda ciano */
.service--cftv, .plan--featured {
  background: linear-gradient(160deg, #10204A 0%, #0A1430 100%); border-color: rgba(76,192,234,.35);
}

/* fotos de produto continuam em fundo claro, mas sem o branco puro */
.gear__img { background: rgba(255,255,255,.03); }
.gear__img--product, .rent-head__img, .svc-hero__media, .split__media--product { background: #EEF2F7; border-color: transparent; }
.solution__art { background: #070C18; }

/* formulário */
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.04); border-color: rgba(232,237,243,.14); color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: #6F7E95; }
.field input:focus, .field select:focus, .field textarea:focus {
  background: rgba(255,255,255,.07); border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(27,163,214,.18);
}
.field select option { background: #0A0F19; color: var(--ink); }

/* botão escuro vira contorno ciano (navy some no preto) */
.btn--dark { background: transparent; color: var(--white); border: 1.5px solid rgba(76,192,234,.55); }
.btn--dark:hover { background: rgba(27,163,214,.12); border-color: var(--cyan-300); color: var(--white); }

/* topo das páginas internas, faixa final e rodapé no mesmo preto */
.svc-hero, .page-hero { background: var(--bg-0); }
.cta-band { background: var(--bg-0); border-block: 1px solid var(--card-line); }
.cta-band::before { background: radial-gradient(ellipse 55% 140% at 85% 0%, rgba(27,163,214,.28), transparent 60%), radial-gradient(ellipse 40% 120% at 0% 100%, rgba(30,58,95,.45), transparent 70%); }
.site-footer { background: #020306; border-top: 1px solid var(--card-line); }

/* textos e ícones que eram azul-escuro sobre branco */
.solution li svg, .plan li svg, .check-list li svg, .related__arrow { color: var(--cyan-300); }
.solution__link, .service__more, .plan__more { color: var(--cyan-300); }
.solution:hover .solution__link, .service:hover .service__more { color: var(--white); }
.gear__cat { color: var(--cyan-300); }
.gear__item { background: var(--card); border-color: var(--card-line); }
.gear__item:hover { border-color: rgba(76,192,234,.4); box-shadow: var(--glow); }
.gear__img--product { border-bottom-color: transparent; }
.service--cftv:hover { border-color: rgba(76,192,234,.55); }

.solution, .service, .plan, .gear__item, .pillar, .channel, .form-card, .feature, .related__item { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

/* cabeçalho fixo: preto translúcido com desfoque (em vez do azul-marinho) */
.site-header.is-scrolled,
.site-header.is-open { background: rgba(3, 5, 8, 0.72); }
@media (min-width: 1101px) { .subnav { background: rgba(6, 9, 14, 0.985); } }
@media (max-width: 1100px) { .nav { background: rgba(3, 5, 8, 0.985); } } /* menu aberto: quase opaco para o texto de trás não aparecer */