/* =======================================================
   COMPREHENSIVE PREMIUM UPGRADE - All Sections
   One Stop Roofing Pros
======================================================= */

/* Logo visibility */
.nav-logo img {
  filter: drop-shadow(0 2px 16px rgba(255,255,255,0.18)) brightness(1.15) !important;
  image-rendering: -webkit-optimize-contrast;
}
.footer-brand img {
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(255,255,255,0.1)) !important;
}

/* Why-Us Section */
.why-grid { gap: 72px !important; }
.why-badge {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)) !important;
  box-shadow: 0 12px 40px rgba(34,85,204,0.4) !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
}
.why-badge .num { font-size: 2.4rem !important; font-weight: 900 !important; line-height: 1 !important; color: #fff !important; }
.why-badge .lbl { font-size: 0.82rem !important; color: rgba(255,255,255,0.8) !important; }
.why-feature {
  padding: 20px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
.why-feature:hover {
  background: rgba(34,85,204,0.04) !important;
  border-color: rgba(34,85,204,0.12) !important;
  transform: translateX(6px) !important;
}
.why-feature-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(34,85,204,0.1), rgba(247,147,30,0.07)) !important;
  border: 1px solid rgba(34,85,204,0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
}

/* Service Cards */
.service-card > div:first-child { height: 220px !important; }
.service-card h3 { font-size: 1.15rem !important; margin-bottom: 8px !important; }
.service-card .learn-more {
  font-weight: 700 !important;
  color: var(--blue) !important;
  font-size: 0.9rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: gap 0.2s ease !important;
}
.service-card:hover .learn-more { gap: 10px !important; }

/* Process Section */
.section-dark {
  background: linear-gradient(135deg, #06101f 0%, #0c1e45 50%, #06101f 100%) !important;
}
.section-dark .section-header p { color: rgba(255,255,255,0.65) !important; }
.process-grid { position: relative !important; gap: 32px !important; }
.process-grid::after {
  content: "";
  position: absolute;
  top: 44px;
  left: calc(16.67% + 24px);
  right: calc(16.67% + 24px);
  height: 1px;
  background: linear-gradient(90deg, rgba(34,85,204,0.5), rgba(247,147,30,0.6), rgba(34,85,204,0.5));
  pointer-events: none;
}
@media (max-width: 768px) { .process-grid::after { display: none; } }
.step-num {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  margin: 0 auto 20px !important;
  box-shadow: 0 8px 28px rgba(34,85,204,0.45) !important;
  position: relative;
  z-index: 1;
}
.process-step {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 36px 28px !important;
}
.process-step h4 { color: #fff !important; font-size: 1.1rem !important; margin-bottom: 10px !important; }
.process-step p { color: rgba(255,255,255,0.6) !important; font-size: 0.9rem !important; }
.process-step:hover { background: rgba(255,255,255,0.07) !important; border-color: rgba(34,85,204,0.35) !important; }

/* Testimonials */
.testimonials-grid { gap: 24px !important; }
.testimonial-card {
  border-top: 3px solid rgba(34,85,204,0.12) !important;
  transition: border-top-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
  padding: 32px !important;
}
.testimonial-card:hover { border-top-color: #f7931e !important; }
.testimonial-card > p { font-size: 0.97rem !important; line-height: 1.8 !important; color: #374151 !important; font-style: italic !important; }
.stars { display: flex !important; gap: 3px !important; margin-bottom: 16px !important; }
.stars span { color: #f59e0b !important; font-size: 1rem !important; }
.reviewer-avatar {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
}
.reviewer-info strong { font-size: 0.95rem !important; }
.reviewer-info span { font-size: 0.8rem !important; color: var(--mid-gray) !important; }

/* Service Areas */
.areas-grid { gap: 10px !important; }
.area-pill {
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border: 1px solid rgba(34,85,204,0.14) !important;
  background: #fff !important;
  color: var(--dark) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.22s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.area-pill:hover {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(34,85,204,0.25) !important;
}
.area-pill .dot { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; flex-shrink: 0; transition: background 0.2s; }
.area-pill:hover .dot { background: rgba(255,255,255,0.8) !important; }

/* Blog */
.blog-card { border-radius: 16px !important; overflow: hidden !important; }
.blog-img { position: relative; overflow: hidden; }
.blog-img img { transition: transform 0.5s ease !important; }
.blog-card:hover .blog-img img { transform: scale(1.06) !important; }
.blog-category {
  position: absolute; top: 14px; left: 14px;
  background: var(--blue) !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 50px !important;
}
.blog-body { padding: 26px 28px !important; }
.blog-meta { font-size: 0.78rem !important; color: var(--mid-gray) !important; margin-bottom: 12px !important; }
.blog-body h3 { font-size: 1.05rem !important; line-height: 1.45 !important; margin-bottom: 10px !important; }
.read-more {
  font-weight: 700 !important;
  color: var(--blue) !important;
  font-size: 0.88rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: gap 0.2s ease !important;
  margin-top: 14px !important;
}
.blog-card:hover .read-more { gap: 10px !important; }

/* Gallery */
.gallery-item { border-radius: 16px !important; }
.gallery-overlay {
  background: linear-gradient(to top, rgba(6,16,31,0.92) 0%, rgba(6,16,31,0.3) 60%, transparent 100%) !important;
  padding: 20px !important;
}
.gallery-overlay span { font-size: 0.85rem !important; font-weight: 600 !important; letter-spacing: 0.03em !important; color: rgba(255,255,255,0.92) !important; }

/* Hide plain divider bars */
.divider { display: none !important; }

/* Eyebrow consistent */
.eyebrow { font-size: 0.75rem !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; }