/* ===== TRAFIC INSTAGRAM — Polish overlay (applies to all pages) ===== */

/* Font upgrade */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, .hero-title, .section-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Smoother all transitions */
a, button, .btn, .card, .case-card, .review-card, .pricing-card, .platform-card,
.feature, .step, .price-tier, .resource-card, .toggle, [class*="card"] {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Image quality polish */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* Cards - consistent style */
.card, .case-card, .review-card, .pricing-card, .platform-card,
.feature-card, .resource-card, .price-tier {
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s !important;
}
.card:hover, .case-card:hover, .review-card:hover, .pricing-card:hover,
.platform-card:hover, .feature-card:hover, .resource-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

/* Buttons polish */
.btn, button.btn, a.btn, .cta-btn, .btn-primary {
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border-radius: 12px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.btn-primary, .btn.btn-primary, button.btn.btn-primary, a.btn.btn-primary {
  background: linear-gradient(135deg, #FCAF45 0%, #F77737 25%, #E1306C 50%, #C13584 75%, #833AB4 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(225, 48, 108, 0.3) !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(225, 48, 108, 0.4) !important;
}

/* Section spacing */
section, .section, .container > section {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Section titles */
.section-title, h2.section-title, h2 {
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 42px) !important;
}

/* Hero polish */
.hero h1, h1.hero-title {
  font-weight: 800 !important;
  font-size: clamp(36px, 5.5vw, 56px) !important;
  line-height: 1.05 !important;
}

/* Logo mark gradient consistency */
.mark, .logo-mark {
  background: linear-gradient(135deg, #FCAF45 0%, #F77737 25%, #E1306C 50%, #C13584 75%, #833AB4 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(225, 48, 108, 0.3) !important;
}

/* Promo bar */
.promo {
  background: linear-gradient(135deg, #FCAF45 0%, #F77737 25%, #E1306C 50%, #C13584 75%, #833AB4 100%) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Pricing tier highlight */
.pricing-card.featured, .price-tier.featured, .pricing-card.popular {
  border: 2px solid #E1306C !important;
  box-shadow: 0 14px 40px rgba(225, 48, 108, 0.18) !important;
  transform: scale(1.02);
}

/* Reviews stars */
.stars, .rating, [class*="star"] {
  color: #FCAF45 !important;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Image lazy loading + smooth fade */
img {
  transition: opacity 0.3s ease;
}
img[loading="lazy"] {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

/* Avatar polish — rounded with IG ring */
.avatar, .profile-avatar img, .review-avatar, .author-avatar {
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Filter chips */
.filter, [data-filter], .chip, .tag {
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  transition: all 0.2s !important;
  cursor: pointer;
}
.filter.active, [data-filter].active {
  background: linear-gradient(135deg, #E1306C, #C13584) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(225, 48, 108, 0.3) !important;
}

/* Improve readability — line-height + max-width */
p {
  line-height: 1.65;
  max-width: 75ch;
}

/* Subtle shimmer effect on hover for tiles/posts */
.ig-mini-tile, .post-tile, .case-img {
  position: relative;
  overflow: hidden;
}
.ig-mini-tile::before, .post-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s;
  pointer-events: none;
}
.ig-mini-tile:hover::before, .post-tile:hover::before {
  transform: translateX(100%);
}

/* Footer polish */
footer {
  font-feature-settings: "ss01";
}

/* Selection color */
::selection {
  background: rgba(225, 48, 108, 0.25);
  color: inherit;
}

/* Better focus states for accessibility */
:focus-visible {
  outline: 2px solid #E1306C !important;
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus, a:focus { outline: none; }

/* Lead-Gene strip enhancement */
.lg-strip { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.lg-strip-nav a { transition: color 0.2s, transform 0.2s; }
.lg-strip-nav a:hover { transform: translateY(-1px); }

/* Lead-Gene footer polish */
.lg-foot a:hover { color: #FF5B35 !important; }

/* Loading skeleton for missing images */
img:not([src]), img[src=""] {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile responsive polish */
@media (max-width: 720px) {
  h1, h2, .section-title { letter-spacing: -0.02em !important; }
  section, .section { padding-top: 40px; padding-bottom: 40px; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Print friendly */
@media print {
  .promo, .lg-strip, .header, header, .lg-foot, footer, .nav { display: none !important; }
}