/* =============================================
   SHARED HEADER/FOOTER SNIPPET
   Copy this HTML into every page for consistency
   ============================================= */

/*
  All pages use the same:
  - #navbar (sticky glassmorphism nav)
  - #footer (dark premium footer)
  - #back-to-top
  - .floating-btns (WhatsApp + Call)
  - #ai-chat-widget
  - #cookie-banner
  - #newsletter-popup
  - #toast-container
  - #progress-bar
  - #preloader
  - #mouse-follower
  - #search-popup
  - #mobile-nav
*/

/* Page Hero Styles (shared across inner pages) */
.page-hero {
  padding: 140px 0 80px;
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
}

.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.15);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.page-hero h1 {
  margin-bottom: 1rem;
}

.page-hero p {
  font-size: 1.1rem;
  max-width: 560px;
}

.breadcrumb-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.breadcrumb-custom a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumb-custom a:hover { color: var(--primary); }
.breadcrumb-custom .sep { opacity: 0.4; }
.breadcrumb-custom .current { color: var(--primary); font-weight: 600; }