/* =============================================
   Home Page Specific Styles
============================================= */

/* Hero Sub */
.hero-sub {
  font-size: 1.3rem;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 8px;
  font-family: var(--font-head);
}

/* Promo Strip */
.promo-strip { padding: 48px 0; background: var(--navy-dark); }
.promo-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promo-item {
  border-radius: var(--border-r-xl);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}
.promo-cctv  { background: linear-gradient(135deg, #1e2d50, #334778); border: 1px solid rgba(255,176,114,0.3); }
.promo-lock  { background: linear-gradient(135deg, #2d4a1e, #3d6228); border: 1px solid rgba(114,200,34,0.3); }
.promo-service { background: linear-gradient(135deg, #4a2000, #7a3800); border: 1px solid rgba(255,176,114,0.3); }
.promo-item::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.promo-content { position: relative; z-index: 2; }
.promo-tag {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.promo-lock .promo-tag { background: var(--green); }
.promo-content h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 8px; }
.promo-content p { color: rgba(255,255,255,0.7); font-size: 0.875rem; margin-bottom: 16px; line-height: 1.5; }

/* CTA Section */
.section-cta {
  background: linear-gradient(135deg, var(--orange), #ff8c42);
  padding: 64px 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-content h2 { font-size: 2rem; color: var(--white); margin-bottom: 8px; }
.cta-content p { color: rgba(255,255,255,0.85); font-size: 1.05rem; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-actions .btn-secondary { border-color: rgba(255,255,255,0.7); }
.cta-actions .btn-primary { background: var(--white); color: var(--orange); }
.cta-actions .btn-primary:hover { background: var(--navy); color: var(--white); }

/* Mobile responsive for home */
@media (max-width: 768px) {
  .promo-inner { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-actions { justify-content: center; }
}