/* ============================================
   Titan Surveillance brand polish
   More distinctive, accessible colour system and readability fixes
   ============================================ */

:root {
  --color-primary: #0B3A53;
  --color-primary-dark: #06283D;
  --color-primary-deep: #041C2B;
  --color-secondary: #0E7490;
  --color-secondary-dark: #0B5E73;
  --color-cta: #B45309;
  --color-cta-hover: #7C2D12;
  --color-cta-soft: #FFF7ED;
  --color-highlight: #F59E0B;
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-section-soft: #EAF4F7;
  --color-text: #111827;
  --color-text-muted: #475569;
  --color-border: #CBD5E1;

  --primary-color: var(--color-primary);
  --secondary-color: var(--color-primary-dark);
  --accent-color: var(--color-secondary);
  --accent-bright: var(--color-secondary);
  --accent-teal: var(--color-secondary);
  --accent-cyan: var(--color-secondary);
  --accent-gold: var(--color-cta);
  --button-orange: var(--color-cta);
  --button-orange-hover: var(--color-cta-hover);
  --dark-bg: var(--color-primary-dark);
  --light-bg: var(--color-background);
  --text-dark: var(--color-text);
  --text-light: #FFFFFF;
  --text-gray: var(--color-text-muted);
  --border-color: var(--color-border);
  --success-color: var(--color-secondary);
  --gradient-start: var(--color-primary-deep);
  --gradient-mid: var(--color-primary);
  --gradient-end: var(--color-secondary-dark);
}

html {
  accent-color: var(--color-secondary);
}

body {
  background:
    radial-gradient(circle at top left, rgba(14, 116, 144, 0.08), transparent 32rem),
    linear-gradient(180deg, #FFFFFF 0%, var(--color-background) 38rem);
  color: var(--color-text);
}

.header {
  background:
    linear-gradient(135deg, rgba(4, 28, 43, 0.98) 0%, rgba(11, 58, 83, 0.98) 55%, rgba(14, 116, 144, 0.92) 100%) !important;
  border-bottom: 3px solid rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 10px 34px rgba(4, 28, 43, 0.28), 0 1px 0 rgba(255,255,255,0.08) inset !important;
}

.logo,
.nav {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.logo .logo-text {
  background: linear-gradient(135deg, #FFFFFF 0%, #DDF7FA 45%, #FDE68A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.logo .tagline,
.nav a:hover,
.nav a:focus-visible {
  color: #FDE68A !important;
}

.nav a::after {
  background: linear-gradient(90deg, transparent 0%, #F59E0B 50%, transparent 100%) !important;
}

.header-contact .phone-link {
  background: linear-gradient(135deg, #0E7490 0%, #0B5E73 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(14, 116, 144, 0.35) !important;
}

.header-contact .phone-link:hover,
.header-contact .phone-link:focus-visible {
  background: linear-gradient(135deg, #0B5E73 0%, #0B3A53 100%) !important;
}

.hero {
  background:
    linear-gradient(135deg, rgba(4, 28, 43, 0.96) 0%, rgba(11, 58, 83, 0.95) 42%, rgba(14, 116, 144, 0.85) 100%),
    radial-gradient(circle at 18% 18%, rgba(45, 212, 191, 0.25), transparent 24rem),
    radial-gradient(circle at 78% 28%, rgba(245, 158, 11, 0.18), transparent 20rem),
    radial-gradient(circle at 50% 92%, rgba(180, 83, 9, 0.18), transparent 24rem) !important;
  color: #FFFFFF !important;
  isolation: isolate;
}

.hero::before {
  opacity: 0.72 !important;
}

.hero::after {
  opacity: 0.18 !important;
}

.hero canvas {
  opacity: 0.2 !important;
}

.hero-content {
  max-width: 1040px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #FFF7ED !important;
  background: rgba(255, 255, 255, 0.11) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 30px rgba(4, 28, 43, 0.22) !important;
}

.hero h1 {
  color: #FFFFFF !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

.hero h1 .highlight {
  color: #FDE68A !important;
  -webkit-text-fill-color: #FDE68A !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

.hero p {
  color: #FFFFFF !important;
  opacity: 1 !important;
  max-width: 980px !important;
  font-weight: 650;
  line-height: 1.62 !important;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
  background: rgba(4, 28, 43, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 60px rgba(4, 28, 43, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 4vw, 2.1rem);
}

.hero-buttons {
  gap: 1.25rem !important;
}

.btn-primary,
.hero .btn-primary,
a.btn-primary {
  background: linear-gradient(135deg, #B45309 0%, #A34108 48%, #7C2D12 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(124, 45, 18, 0.35), 0 0 0 4px rgba(245, 158, 11, 0.10) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus-visible {
  background: linear-gradient(135deg, #7C2D12 0%, #7C2D12 100%) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 36px rgba(124, 45, 18, 0.42), 0 0 0 5px rgba(245, 158, 11, 0.16) !important;
}

.hero .btn-secondary,
.btn-secondary {
  background: linear-gradient(135deg, #0E7490 0%, #0B5E73 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(14, 116, 144, 0.32), 0 0 0 4px rgba(45, 212, 191, 0.10) !important;
}

.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: linear-gradient(135deg, #0B5E73 0%, #0B3A53 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 36px rgba(14, 116, 144, 0.38), 0 0 0 5px rgba(45, 212, 191, 0.15) !important;
}

.hero .u-style-0050 {
  max-width: 980px !important;
  gap: 1.25rem !important;
}

.hero .u-style-0051 {
  background: rgba(255, 255, 255, 0.095) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 34px rgba(4, 28, 43, 0.24) !important;
}

.hero .u-style-0052 {
  color: #FDBA74 !important;
}

.service-card,
.feature-card,
.blog-card,
.testimonial-card,
.faq-item,
.card {
  border-color: rgba(14, 116, 144, 0.14) !important;
  box-shadow: 0 10px 28px rgba(4, 28, 43, 0.06) !important;
}

.service-card::before,
.feature-card::after {
  background: linear-gradient(90deg, #0E7490 0%, #F59E0B 100%) !important;
}

.section-title,
.services-section h2,
.features-section h2,
h2 {
  color: var(--color-primary-dark);
}

.feature-icon,
.service-icon {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.12), rgba(245, 158, 11, 0.12)) !important;
  color: var(--color-primary-dark) !important;
}

a:not(.btn-primary):not(.btn-secondary):not(.phone-link) {
  color: #0B5E73;
}

a:not(.btn-primary):not(.btn-secondary):not(.phone-link):hover,
a:not(.btn-primary):not(.btn-secondary):not(.phone-link):focus-visible {
  color: #7C2D12;
}

.stats-section,
.cta-section,
.footer,
.u-style-0056,
.u-style-0129,
.u-style-0134,
.u-style-0172,
.u-style-0188,
.u-style-0209 {
  background: linear-gradient(135deg, #041C2B 0%, #0B3A53 58%, #0B5E73 100%) !important;
}

.footer a,
.stats-section a,
.cta-section a {
  color: #FDE68A;
}

:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .hero p {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    border-radius: 18px;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: min(100%, 22rem);
    text-align: center;
  }
}

/* ============================================
   Header menu readability fix
   Keeps the navigation attractive before hover, not only on hover.
   ============================================ */
.header .nav {
  background: rgba(4, 28, 43, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 28px rgba(4, 28, 43, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.header .nav a:not(.btn-primary):not(.btn-secondary),
.header .nav a:not(.btn-primary):not(.btn-secondary):visited {
  color: #F8FAFC !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.header .nav a:not(.btn-primary):not(.btn-secondary):hover,
.header .nav a:not(.btn-primary):not(.btn-secondary):focus-visible {
  color: #041C2B !important;
  background: linear-gradient(135deg, #FDE68A 0%, #FDBA74 100%) !important;
  border-color: rgba(253, 230, 138, 0.75) !important;
  text-shadow: none !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.header .nav a.btn-primary,
.header .nav a.btn-primary:visited {
  background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.header .nav a.btn-primary:hover,
.header .nav a.btn-primary:focus-visible {
  background: linear-gradient(135deg, #FDBA74 0%, #F59E0B 100%) !important;
  color: #041C2B !important;
  text-shadow: none !important;
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

@media (max-width: 768px) {
  .header .nav {
    background: rgba(4, 28, 43, 0.82) !important;
  }

  .header .nav a:not(.btn-primary):not(.btn-secondary),
  .header .nav a.btn-primary {
    width: 100%;
    min-height: 44px;
  }
}