/* ============================================================
   PREMIUM 2026 ENHANCEMENT OVERLAY
   Platinum Chiropractic — Modern SaaS Design System
   Layers on top of styles.css + animations.css
   ============================================================ */

/* ── 1. SCROLL PROGRESS BAR ─────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #0069a6, #ff8956);
  z-index: 9999;
  transform-origin: left;
  transition: none;
}

/* ── 2. HEADER PREMIUM ENHANCEMENTS ─────────────────────── */
.header.scrolled {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 5%, rgba(0,105,166,0.12) 30%, rgba(255,137,86,0.10) 70%, transparent 95%) 1;
}

/* Nav link hover underline animation */
.nav__link {
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #0069a6, #2563eb);
  border-radius: 1px;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__link:hover::after {
  width: 100%;
  left: 0;
}

/* ── 3. HERO PREMIUM ENHANCEMENTS ───────────────────────── */
/* Hero badge glassmorphism */
.hero__badge {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 105, 166, 0.1);
  box-shadow: 0 2px 12px rgba(0, 105, 166, 0.06);
}

/* Hero social proof enhancement */
.hero__social-proof {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Float badges — stronger glass */
.float-badge {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Hero CTA glow animation */
.hero__actions .btn--gradient {
  box-shadow: 0 4px 24px rgba(0, 105, 166, 0.25), 0 0 0 0 rgba(0, 105, 166, 0);
  animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 4px 24px rgba(0, 105, 166, 0.25), 0 0 0 0 rgba(0, 105, 166, 0); }
  50% { box-shadow: 0 4px 32px rgba(0, 105, 166, 0.35), 0 0 0 8px rgba(0, 105, 166, 0); }
}

/* Hero chips — glass effect */
.hero__chips .chip {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero__chips .chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 105, 166, 0.08);
}

/* ── 4. CARD PREMIUM ENHANCEMENTS ───────────────────────── */
/* Gradient top-line indicator on hover */
.feature-card,
.role-card,
.outcome-card,
.support-card,
.ai-card {
  position: relative;
  overflow: hidden;
}

.feature-card::before,
.role-card::before,
.outcome-card::before,
.support-card::before,
.ai-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0069a6, #2563eb, #ff8956);
  border-radius: 999px 999px 0 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.feature-card:hover::before,
.role-card:hover::before,
.outcome-card:hover::before,
.support-card:hover::before,
.ai-card:hover::before {
  opacity: 1;
}

/* Inner glow on card hover */
.feature-card:hover,
.role-card:hover,
.outcome-card:hover {
  box-shadow:
    0 8px 32px rgba(0, 105, 166, 0.10),
    0 20px 60px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Icon container radial gradient */
.feature-card .icon-container,
.role-card .icon-container,
.ai-card .icon-container {
  background: radial-gradient(circle at 30% 30%, rgba(0, 105, 166, 0.08) 0%, rgba(0, 105, 166, 0.02) 70%);
}

/* ── 5. STATS PREMIUM STYLING ───────────────────────────── */
.stat {
  position: relative;
}
.stat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,105,166,0.15), transparent);
  border-radius: 1px;
}

/* Stats cards background on hover */
.stats-row--cards .stat {
  padding: 2rem 1.5rem;
  border-radius: 20px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.stats-row--cards .stat:hover {
  background: rgba(0, 105, 166, 0.03);
  transform: translateY(-4px);
}

/* ── 6. TESTIMONIAL PREMIUM ─────────────────────────────── */
/* Large decorative quote marks */
.testimonial__text {
  position: relative;
}
.testimonial__text::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: -8px;
  font-size: 4rem;
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(0, 105, 166, 0.10);
  line-height: 1;
  pointer-events: none;
}

/* Video testimonial gradient overlay */
.testimonial--video .testimonial__thumbnail {
  position: relative;
}
.testimonial--video .testimonial__thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(22, 55, 96, 0.4) 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* Testimonial stats accent colors */
.testimonial__stats-row .stat__number {
  color: #0069a6;
  font-weight: 800;
}

/* ── 7. CTA SECTION PREMIUM ─────────────────────────────── */
/* Dot grid pattern overlay */
.cta-section {
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.cta-section > * {
  position: relative;
  z-index: 1;
}

/* CTA button glow on dark background */
.cta-section .btn--white {
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
.cta-section .btn--white:hover {
  box-shadow: 0 8px 40px rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

/* ── 8. TRUST BAR PREMIUM ───────────────────────────────── */
/* Smoother gradient fade edges */
.trust-bar__track-wrapper::before,
.trust-bar__track-wrapper::after {
  width: 120px !important;
}

/* Trust bar chip glassmorphism */
.trust-bar .chip {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9);
}

/* ── 9. AWARDS SECTION PREMIUM ──────────────────────────── */
.awards-section .icon-container {
  position: relative;
}
.awards-section .icon-container::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, rgba(0,105,166,0.1), rgba(255,137,86,0.1), rgba(0,105,166,0.1));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.awards-section .card:hover .icon-container::after {
  opacity: 1;
}

/* ── 10. BUTTON PREMIUM INTERACTIONS ────────────────────── */
/* Gradient button shimmer sweep on hover */
.btn--gradient {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn--gradient::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  z-index: -1;
}
.btn--gradient:hover::after {
  animation: btnShimmer 0.8s ease forwards;
}

@keyframes btnShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Primary button hover glow */
.btn--primary:hover {
  box-shadow: 0 4px 20px rgba(0, 105, 166, 0.30), 0 0 0 4px rgba(0, 105, 166, 0.06);
}

/* Ghost button for dark backgrounds */
.btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff;
  transition: all 0.3s ease;
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

/* Button arrow slide on hover */
.btn svg {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover svg {
  transform: translateX(3px);
}

/* ── 11. SECTION BACKGROUNDS & PATTERNS ─────────────────── */
/* Dot grid pattern background utility */
.section--dot-pattern {
  position: relative;
}
.section--dot-pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 105, 166, 0.04) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.section--dot-pattern > * {
  position: relative;
  z-index: 1;
}

/* Gradient mesh for dark sections */
.section--bg-dark,
.why-platinum-section {
  position: relative;
  overflow: hidden;
}
.section--bg-dark::after,
.why-platinum-section::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 105, 166, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(255, 137, 86, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.10) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.section--bg-dark > .container,
.why-platinum-section > .container {
  position: relative;
  z-index: 1;
}

/* ── 12. TYPOGRAPHY PREMIUM ─────────────────────────────── */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Section titles balance */
.section__title,
.section-header__title,
.cta-section__title {
  text-wrap: balance;
}

/* ── 13. FEATURE SPLIT PREMIUM ──────────────────────────── */
.feature-split__image {
  position: relative;
}
.feature-split__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 105, 166, 0.06);
  pointer-events: none;
}

/* Accent line decoration */
.feature-split__content .section__label + .section__title::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #0069a6, #ff8956);
  border-radius: 2px;
  margin-bottom: 1rem;
}

/* ── 14. WHY METRIC CARDS PREMIUM ───────────────────────── */
.why-metric-card {
  position: relative;
  overflow: hidden;
}
.why-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0069a6, #ff8956);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.why-metric-card:hover::before {
  opacity: 1;
}

/* ── 15. HARD TRUTH CARDS PREMIUM ───────────────────────── */
.hard-truth-card {
  position: relative;
}
.hard-truth-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,105,166,0.08), transparent);
}

/* ── 16. DASHBOARD V2 PREMIUM ───────────────────────────── */
.dashboard-v2 {
  position: relative;
}
.dashboard-v2::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0,105,166,0.12), rgba(255,137,86,0.08), rgba(0,105,166,0.12));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.dashboard-v2:hover::after {
  opacity: 1;
}

/* ── 17. LEGACY CARDS PREMIUM ───────────────────────────── */
.legacy-stat__number {
  background: linear-gradient(135deg, #0069a6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 18. UTILITY CLASSES ────────────────────────────────── */
/* Glassmorphism utility */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #0069a6 0%, #2563eb 50%, #ff8956 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hover lift utility */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* Magnetic hover — JS-driven, CSS handles transition */
.magnetic-hover {
  transition: transform 0.2s ease;
}

/* ── 19. SMOOTH SECTION TRANSITIONS ─────────────────────── */
/* Subtle gradient dividers between sections */
.section + .section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,105,166,0.08), transparent);
  pointer-events: none;
}
/* Hide dividers between contrasting sections */
.section--bg-dark + .section::after,
.section + .section--bg-dark::after,
.section--bg-tinted + .section--bg-white::after,
.section--bg-white + .section--bg-tinted::after {
  display: none;
}

/* ── 20. SELECTION & FOCUS ──────────────────────────────── */
::selection {
  background: rgba(0, 105, 166, 0.15);
  color: inherit;
}

:focus-visible {
  outline: 2px solid rgba(0, 105, 166, 0.5);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 21. RESPONSIVE PREMIUM ENHANCEMENTS ────────────────── */
@media (max-width: 1024px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stats-toolbar {
    gap: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .stats-row {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .stats-row--cards .stat {
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.04);
  }
  .section-header {
    max-width: 100%;
  }
  .float-badge {
    display: none;
  }
  /* Better touch targets */
  .btn {
    min-height: 48px;
  }
  .nav__link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Hide section dividers on mobile */
  .section + .section::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(2.2rem, 8vw, 3rem) !important;
  }
  .section__title,
  .section-header__title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
  }
  .cta-section {
    padding: 2.5rem 1.5rem !important;
    border-radius: 20px !important;
  }
  .stats-toolbar {
    flex-direction: column !important;
    align-items: center !important;
  }
  .stat__number {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
}

/* ── 22. PRINT STYLES ───────────────────────────────────── */
@media print {
  .header,
  .scroll-progress,
  .aurora,
  .light-particles,
  .hero-wave,
  .float-badge,
  .stats-toolbar {
    display: none !important;
  }
  .section {
    padding: 2rem 0 !important;
    break-inside: avoid;
  }
  body {
    color: #000 !important;
    background: #fff !important;
  }
  .btn {
    border: 1px solid #000 !important;
    color: #000 !important;
    background: transparent !important;
  }
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }
}