/* ==========================================================================
   polish.css — UI/UX refinements (loaded last, additive & safe)
   CrazyGKTrick
   ========================================================================== */

html { scroll-behavior: smooth; }

/* Consistent vertical rhythm for homepage sections */
.other-platforms,
.home-blog,
.testimonials,
.social-media-info,
.apps-download { scroll-margin-top: 100px; }

/* ---------- Homepage "Latest from Blog" ---------- */
.home-blog {
  padding: 56px 0;
  margin: 0 0 50px;
  background: linear-gradient(135deg, #f6fbff 0%, #eef5ff 100%);
  border-radius: 14px;
}
.home-blog .section-title { margin-bottom: 10px; }
.home-blog-sub {
  text-align: center;
  color: #5a6b80;
  max-width: 720px;
  margin: 0 auto 34px;
  font-size: 1.02rem;
  line-height: 1.6;
}
.home-blog .blog-grid { margin-top: 6px; }

/* Slightly tighter, classier cards on the home grid */
.home-blog .blog-card { box-shadow: 0 4px 16px rgba(2, 32, 89, .06); }

/* ---------- Section titles: a touch more polish ---------- */
.section-title { letter-spacing: -0.3px; }

/* ---------- Buttons: smoother feel ---------- */
.btn, .btn-image-bottom { letter-spacing: .2px; }

/* ---------- Platform / app / testimonial cards: unify hover ---------- */
.platform-card, .app-card, .testimonial-item { will-change: transform; }

/* ---------- Back-to-top friendliness: focus styles for accessibility ---------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(0, 86, 179, .35);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Images never overflow ---------- */
main img { max-width: 100%; height: auto; }

/* ---------- Ad slot becomes a real ad ---------- */
.ad-slot.ad-live {
  background: none;
  border: none;
  min-height: 0;
  display: block;
}

/* ==========================================================================
   Responsive refinements
   ========================================================================== */
@media (max-width: 992px) {
  .section-title { font-size: 1.8em; }
  .home-blog { padding: 40px 0; }
}

@media (max-width: 768px) {
  body { padding-top: 72px; }                 /* match fixed header height */
  .container { width: 92%; }
  .section-title { font-size: 1.55em; margin-bottom: 26px; }
  .home-blog-sub { font-size: .95rem; margin-bottom: 24px; }

  /* Platform cards: 1 per row reads better on phones */
  .platform-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .platform-card { padding: 22px 14px; }
  .platform-card i { font-size: 2.4em; }
  .platform-card h4 { font-size: 1.1em; }

  /* Social buttons wrap nicely */
  .social-links-big { gap: 12px; }
  .social-icon { padding: 12px 20px; font-size: .95rem; }
}

@media (max-width: 480px) {
  .platform-grid { grid-template-columns: 1fr; }
  .hs-left h1 { font-size: 1.5rem; }
  .blog-hero { padding: 36px 16px; }
}