/* FluxUI v7.1 — Visual Depth Layer
   Aditivo: carregado depois de polish.v7.0. Só refina superfícies, luz e profundidade. */

:root {
  --surface-top: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 55%);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.055);
  --blue-glow: rgba(77,143,247,.35);
}

/* Atmosfera: luz azul sutil em dois pontos da página */
body {
  background:
    radial-gradient(circle at 70% -8%, rgba(77,143,247,.11), transparent 34%),
    radial-gradient(circle at -5% 58%, rgba(77,143,247,.05), transparent 30%),
    var(--bg);
}

/* Hero: malha desaparece nas bordas em vez de terminar seca */
.hero-grid-lines {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 28%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 28%, #000 25%, transparent 78%);
}

/* Dashboard: peça central da página, com moldura luminosa e profundidade real */
.hero-dashboard {
  border-color: rgba(120,169,255,.2);
  background: linear-gradient(180deg, #10151a, #0b0e11 38%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025),
    0 50px 110px -30px rgba(0,0,0,.7),
    0 40px 120px -50px var(--blue-glow),
    var(--edge-light);
}
.dashboard-bar { background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.05); }
.dash-grid article, .quality-card, .timeline-card {
  background: var(--surface-top), #0f1317;
  box-shadow: var(--edge-light);
}
.dash-status i { box-shadow: 0 0 0 4px rgba(77,143,247,.16), 0 0 14px var(--blue-glow); }
.dash-progress-fill, .portal-progress-fill {
  background: linear-gradient(90deg, #3f7fe6, #78a9ff);
  box-shadow: 0 0 18px -2px var(--blue-glow);
}

/* Divisórias: linha que se dissolve nas pontas, com um brilho central */
.section-border {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(120,169,255,.26) 50%, transparent) 1;
}

/* Superfícies: luz superior discreta, mesma lógica em todos os cards */
.capability-card, .solution-card, .quality-list article, .contact-form {
  background-image: var(--surface-top);
  box-shadow: var(--edge-light);
}
.solution-card { border-color: #1d242b; }
.solution-art { box-shadow: inset 0 -1px 0 rgba(255,255,255,.04); }
.cap-index { color: var(--blue-2); opacity: .85; }
.cap-tags span { background: rgba(255,255,255,.02); }

/* Frase de impacto: leve halo para separar da seção anterior */
.statement-section {
  background: radial-gradient(60% 90% at 18% 50%, rgba(77,143,247,.085), transparent 70%);
}

/* Botões: o principal ganha corpo; o secundário vira vidro */
.button-light {
  background: linear-gradient(180deg, #ffffff, #dbe5f3);
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -14px rgba(120,169,255,.6);
}
.button-light:hover {
  background: linear-gradient(180deg, #ffffff, #e8f0fb);
  box-shadow: inset 0 1px 0 #fff, 0 16px 38px -14px rgba(120,169,255,.75);
}
.button-outline {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.button-outline:hover { background: rgba(255,255,255,.07); border-color: rgba(120,169,255,.45); }
.button-dark { box-shadow: var(--edge-light); }

/* Formulário: painel elevado e verificação de segurança integrada */
.contact-form {
  border-color: #252d36;
  box-shadow: 0 40px 90px -48px rgba(0,0,0,.9), 0 30px 90px -70px var(--blue-glow), var(--edge-light);
}
.security-check { background: rgba(77,143,247,.045); border-color: rgba(120,169,255,.18); }
.security-icon { box-shadow: 0 0 0 4px rgba(77,143,247,.12); }
.form-assurance span { background: rgba(255,255,255,.025); border-radius: 999px; padding: 5px 11px; }

/* FAQ e rodapé */
.faq-list details[open] { background: linear-gradient(90deg, rgba(77,143,247,.05), transparent 70%); }
.site-footer { background: linear-gradient(180deg, transparent, rgba(77,143,247,.045)); }
.footer-brand .brand-symbol { text-shadow: 0 0 28px var(--blue-glow); }

/* Celulares: menos luz, mais respiro, sem custo extra de blur */
@media (max-width: 760px) {
  .hero-dashboard { box-shadow: 0 30px 70px -30px rgba(0,0,0,.7), var(--edge-light); }
  .button-outline { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .statement-section { background: radial-gradient(90% 60% at 20% 40%, rgba(77,143,247,.07), transparent 70%); }
}