/* ── Sirius Agency V2 — sections.css (override layer) ── */
/* Loaded after style.css. !important ensures cascade wins. */

/* ── Hero ── */
#hero {
  background: linear-gradient(135deg, #07122A 0%, #0d2260 30%, #1a3a8f 65%, #2451b3 100%) !important;
  min-height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  padding: 120px 0 80px !important;
}

/* ── Services Grid V2 ── */
.services-v2-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}
.svc-v2-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  padding: 32px 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
.svc-v2-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: #e8f0fe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}
.svc-v2-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* ── Stats Grid V2 ── */
.stats-v2-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}
.stat-v2 {
  text-align: center !important;
  padding: 40px 24px !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
}
.stat-v2:last-child { border-right: none !important; }
.stat-v2-number {
  display: block !important;
  font-size: clamp(2.4rem,4vw,3.5rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
}
.stat-plus { color: #c2ef03 !important; }
.stat-v2-label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.7) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── Process Steps ── */
.process-steps {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  position: relative !important;
}
.process-step {
  text-align: center !important;
  padding: 0 16px !important;
  position: relative !important;
  z-index: 1 !important;
}
.process-num {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #1a3a8f !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 0 3px #e8f0fe, 0 4px 16px rgba(26,58,143,0.25) !important;
}

/* ── Clients Grid ── */
.clients-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px !important;
  align-items: center !important;
  margin-bottom: 36px !important;
}
.client-logo {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 12px !important;
  padding: 20px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80px !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
.client-logo:hover {
  box-shadow: 0 6px 24px rgba(26,58,143,0.12) !important;
  transform: translateY(-2px) !important;
}
.client-logo-img {
  max-width: 100% !important;
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: grayscale(100%) !important;
  opacity: 0.65 !important;
  transition: filter 0.2s, opacity 0.2s !important;
}
.client-logo:hover .client-logo-img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* ── Case Studies Grid ── */
.case-studies-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.case-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 3/4 !important;
}
.case-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 28px !important;
  z-index: 1 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%) !important;
}

/* ── Testimonials Slider ── */
.testimonials-track {
  overflow: hidden !important;
}
.testimonials-list {
  display: flex !important;
  transition: transform 0.5s ease !important;
}
.testimonial-item {
  min-width: 100% !important;
  padding: 0 8px !important;
}
.testimonial-card {
  background: #f8f9fb !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 20px !important;
  padding: 40px 44px !important;
  text-align: center !important;
}
.testimonials-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 28px !important;
}
.testimonials-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.15) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.3s ease, width 0.3s ease !important;
  padding: 0 !important;
}
.testimonials-dot.active {
  background: #1a3a8f !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ── Contact Form ── */
.contact-grid-v2 {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 64px !important;
  align-items: center !important;
}
.contact-form-panel {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  padding: 40px !important;
}
.cf-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.cf-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}
.cf-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.ci-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ── Responsive overrides ── */
@media (max-width: 1024px) {
  .services-v2-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .stats-v2-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-v2          { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .stat-v2:nth-child(2n) { border-right: none !important; }
  .clients-grid     { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .services-v2-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .contact-grid-v2      { grid-template-columns: 1fr !important; gap: 48px !important; }
  .cf-row               { grid-template-columns: 1fr !important; }
  .process-steps        { grid-template-columns: 1fr !important; gap: 28px !important; }
  .process-steps::before{ display: none !important; }
  .process-step         { display: flex !important; text-align: left !important; gap: 20px !important; align-items: flex-start !important; }
  .process-num          { margin: 0 !important; flex-shrink: 0 !important; }
  .case-studies-grid    { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .services-v2-grid { grid-template-columns: 1fr !important; }
  .clients-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-v2-grid    { grid-template-columns: 1fr 1fr !important; }
  .stat-v2          { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
  .contact-form-panel { padding: 24px 20px !important; }
  .testimonial-card   { padding: 28px 20px !important; }
}