/* ============================================================
   ARGUS SECURITY — Gruppo Pasquariello
   executive.css — Tema dedicato NERO/ROSSO per la pagina
   Argus Executive (sovrascrive la palette blu solo lì)
   ============================================================ */

/* Variabili della pagina */
:root {
  --bg: #08080A;
  --card: #101014;
  --border: #262026;
  --muted: #9CA3AF;
  --accent: #DC2626;
  --accent-hover: #EF4444;
}

body { background: #08080A; }

/* Gradiente testo rosso */
.text-accent-gradient {
  background: linear-gradient(135deg, #DC2626 0%, #F87171 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Pulsanti */
.btn-primary { background: #DC2626; }
.btn-primary:hover { background: #EF4444; box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35); }
.btn-secondary { border-color: #3A3236; background: rgba(8, 8, 10, 0.55); }
.btn-secondary:hover { border-color: #DC2626; background: rgba(220, 38, 38, 0.08); }

/* Navbar */
.navbar.scrolled { background: rgba(8, 8, 10, 0.95); border-bottom-color: #262026; }
.navbar-link::after { background: #DC2626; }

/* Etichette e dettagli */
.section-label { color: #EF4444; }
.accent-line { background: #DC2626; }
.adv-tag { color: #EF4444; }
.section-divider { background: linear-gradient(90deg, transparent 0%, #262026 50%, transparent 100%); }

/* Card */
.vb-card { background: #101014; border-color: #262026; }
.vb-card:hover { border-color: #DC2626; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(220, 38, 38, 0.10); }
.vb-icon { background: #1C1214; }
.vb-icon svg { color: #EF4444; }
.vb-link:hover { color: #EF4444; }

/* Badge, checklist, FAQ, form */
.trust-badge, .check-item, .faq-item, .form-input { background: #101014; border-color: #262026; }
.check-item:hover { border-color: rgba(220, 38, 38, 0.4); }
.check-item svg, .faq-question svg { color: #EF4444; }
.faq-item.open { border-color: rgba(220, 38, 38, 0.45); }
.form-input:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
.form-input option { background: #101014; }

/* Hero e immagini */
.hero-glow { background: radial-gradient(circle, rgba(220, 38, 38, 0.09) 0%, transparent 70%); }
.page-hero-overlay {
  background: linear-gradient(100deg,
    rgba(8, 8, 10, 0.95) 0%,
    rgba(8, 8, 10, 0.88) 30%,
    rgba(8, 8, 10, 0.68) 55%,
    rgba(8, 8, 10, 0.40) 75%,
    rgba(8, 8, 10, 0.50) 100%
  );
}
.service-img, .service-img-frame img { border-color: #262026; }

/* Menu mobile e footer */
.mobile-menu { background: rgba(8, 8, 10, 0.98); }
.mobile-menu a:hover { color: #EF4444; }
.footer-link:hover { color: #EF4444; }

/* Scrollbar */
::-webkit-scrollbar-track { background: #08080A; }
::-webkit-scrollbar-thumb { background: #262026; }
::-webkit-scrollbar-thumb:hover { background: #DC2626; }

/* Slider (se presente nella pagina) */
.slider-arrow:hover { background: #DC2626; border-color: #DC2626; }
.slider-dot.active { background: #DC2626; }

/* ------------------------------------------------------------
   Override delle utility Tailwind compilate con la palette blu:
   sulla pagina Executive gli accenti diventano rossi
   ------------------------------------------------------------ */
.text-accent { color: #DC2626; }
.hover\:text-accent:hover { color: #EF4444; }
.bg-accent\/5 { background-color: rgba(220, 38, 38, 0.05); }
.bg-accent\/3 { background-color: rgba(220, 38, 38, 0.03); }
.accent-accent { accent-color: #DC2626; }
.text-muted { color: #9CA3AF; }
.border-border { border-color: #262026; }
.text-text { color: #F8FAFC; }

/* Gradiente di sfondo della sezione contatti (from-bg via-card to-bg) */
.from-bg {
  --tw-gradient-from: #08080A var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(8, 8, 10, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-card {
  --tw-gradient-to: rgba(16, 16, 20, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #101014 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-bg { --tw-gradient-to: #08080A var(--tw-gradient-to-position); }

/* Overlay hero mobile */
@media (max-width: 768px) {
  .page-hero-overlay {
    background: linear-gradient(180deg,
      rgba(8, 8, 10, 0.62) 0%,
      rgba(8, 8, 10, 0.82) 45%,
      rgba(8, 8, 10, 0.95) 100%
    );
  }
}