/* ═══════════════════════════════════════════════════════════
   HOME RESPONSIVE — Mobile + desktop polish (loads last)
   ═══════════════════════════════════════════════════════════ */

/* ─── Shared tokens ─── */
.page-home {
  --home-pad: clamp(40px, 8vw, 64px);
  --home-gap: clamp(0.75rem, 2vw, 1.15rem);
}

.page-home main > section:not(.hero):not(.stats-strip) {
  padding-top: var(--home-pad) !important;
  padding-bottom: var(--home-pad) !important;
}

.page-home .section-header {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem) !important;
}

/* ─── Hero: mobile & tablet ─── */
@media (max-width: 1023px) {
  .page-home .hero {
    min-height: auto !important;
    padding: calc(var(--header-h, 64px) + 1.5rem) 0 2.5rem !important;
  }

  .page-home .hero-layout {
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
  }

  .page-home .hero-content {
    text-align: center;
    max-width: 100%;
    margin-inline: auto;
  }

  .page-home .hero-content .lead {
    margin-inline: auto;
    max-width: 28rem;
  }

  .page-home .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .page-home .hero-trust {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem !important;
  }

  /* Show compact showcase below hero copy on tablet */
  .page-home .hero-aside {
    display: block !important;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }

  .hero-showcase {
    display: block !important;
    max-width: 100%;
    margin-inline: auto;
    aspect-ratio: 16 / 10;
    max-height: 260px;
  }

  .hero-showcase-float {
    display: none;
  }

  .hero-showcase-badge {
    bottom: 0.85rem;
    left: 0.85rem;
    right: 0.85rem;
  }

  .hero-showcase-badge strong {
    font-size: 0.82rem;
  }

  .hero-showcase-badge span {
    font-size: 0.7rem;
  }
}

@media (max-width: 640px) {
  .page-home .hero-content h1 {
    font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
  }

  .page-home .btn {
    min-height: 44px;
  }

  .page-home .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-home .hero-aside {
    max-width: 100%;
  }

  .hero-showcase {
    max-height: 220px;
  }
}

/* ─── Expertise grid ─── */
@media (max-width: 1023px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--home-gap);
  }

  .expertise-card:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 360px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .expertise-grid {
    grid-template-columns: 1fr !important;
  }

  .expertise-card:nth-child(5) {
    max-width: none;
  }
}

/* ─── Stats ─── */
@media (max-width: 1023px) {
  .page-home .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .page-home .stat-card {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    padding: 1.35rem 1.15rem !important;
    text-align: center;
    background: rgba(255, 255, 255, 0.02) !important;
  }

  .page-home .stat-card-icon {
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .page-home .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }

  .page-home .stat-number {
    font-size: 1.65rem !important;
  }

  .page-home .stat-label {
    font-size: 0.68rem !important;
  }
}

/* ─── AI agents ─── */
@media (max-width: 1023px) {
  .page-home .ai-agents-hero-card {
    grid-template-columns: 1fr !important;
    padding: 1.35rem !important;
    gap: 1.25rem !important;
  }

  .page-home .ai-agents-hero-photo img {
    min-height: 200px;
  }

  .page-home .ai-agents-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--home-gap);
  }

  .page-home .ai-agents-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .page-home .ai-agents-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .page-home .ai-agents-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── CTA strip ─── */
@media (max-width: 768px) {
  .page-home .cta-strip-inner {
    flex-direction: column !important;
    text-align: center;
    padding: 1.35rem 1.25rem !important;
    gap: 1.25rem !important;
  }

  .page-home .cta-strip-actions {
    width: 100%;
    flex-direction: column;
  }

  .page-home .cta-strip-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Bento ─── */
@media (max-width: 1023px) {
  .page-home .bento-item--large,
  .page-home .bento-item--medium,
  .page-home .bento-item--small,
  .page-home .bento-item--wide {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }

  .page-home .bento-item--large {
    min-height: 280px !important;
  }
}

/* ─── Testimonials: slider on mobile, grid on desktop ─── */
@media (max-width: 1023px) {
  .page-home .testimonial-track {
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    transition: transform 0.5s ease;
  }

  .page-home .testimonial-slide {
    min-width: 100% !important;
    padding: 0 0.25rem;
    flex-shrink: 0;
  }

  .page-home .testimonial-nav {
    display: flex !important;
    margin-top: 1.25rem;
  }

  .page-home .testimonial-card {
    padding: 1.35rem 1.15rem !important;
  }
}

/* ─── How we work ─── */
@media (max-width: 1023px) {
  .page-home .how-steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--home-gap) !important;
  }

  .page-home .how-step-img {
    height: 100px;
  }
}

@media (max-width: 560px) {
  .page-home .how-steps {
    grid-template-columns: 1fr !important;
  }
}

/* ─── FAQ ─── */
@media (max-width: 768px) {
  .page-home .faq-preview {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
}

/* ─── CTA banner ─── */
@media (max-width: 768px) {
  .page-home .cta-banner-inner {
    padding: 2rem 1.25rem !important;
  }

  .page-home .cta-banner-actions {
    flex-direction: column;
    width: 100%;
  }

  .page-home .cta-banner-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-home .guarantee-row {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ─── Section orbs: lighter on small screens ─── */
@media (max-width: 768px) {
  .section-orb {
    opacity: 0.5;
    transform: scale(0.65);
  }

  .page-home .expertise-section::before,
  .page-home .ai-agents-section::after {
    opacity: 0.5;
  }
}

/* ─── Touch: no hover lift stuck ─── */
@media (hover: none) {
  .page-home .expertise-card:hover,
  .page-home .agent-card:hover,
  .page-home .logo-card:hover,
  .page-home .bento-item:hover,
  .page-home .how-step:hover,
  .page-home .testimonial-card:hover {
    transform: none !important;
  }

  .page-home .expertise-card:hover::after {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP refinements (1024px+)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Fix cascade: keep gradient text animation */
  .page-home .hero-content h1 .text-gradient {
    animation: gradient-text 6s ease infinite !important;
  }

  .page-home .hero-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .page-home .hero-aside {
    display: block !important;
  }

  .hero-showcase {
    display: block !important;
    max-width: 460px;
    max-height: 520px;
    aspect-ratio: 4 / 5;
  }

  .hero-showcase-float {
    display: flex;
  }

  /* Stats keep themed gradient from home-theme */
  .page-home .stats-strip {
    background-size: 200% 100% !important;
  }

  .page-home .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
  }

  .page-home .stat-card {
    text-align: left;
    border-radius: 0 !important;
    border-right: 1px solid var(--border) !important;
    background: transparent !important;
  }

  /* Testimonials 3-up */
  .page-home .testimonial-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    transform: none !important;
    gap: 1.15rem;
  }

  .page-home .testimonial-slide {
    min-width: 0 !important;
  }

  .page-home .testimonial-nav {
    display: none !important;
  }

  /* Expertise 3+2 on medium desktop */
  .expertise-grid {
    gap: 1.15rem;
  }
}

@media (min-width: 1024px) and (max-width: 1399px) {
  .expertise-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .expertise-card:nth-child(1),
  .expertise-card:nth-child(2),
  .expertise-card:nth-child(3) {
    grid-column: span 2;
  }

  .expertise-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .expertise-card:nth-child(5) {
    grid-column: 4 / span 2;
    max-width: none;
    margin-inline: 0;
    width: auto;
  }
}

@media (min-width: 1400px) {
  .expertise-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .expertise-card:nth-child(n) {
    grid-column: auto !important;
    max-width: none;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .page-home .ai-agents-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .page-home .how-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1200px) {
  .page-home .ai-agents-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .page-home .how-steps {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}