/* ─── Mobile (< 768px) ─── */
@media (max-width: 767px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 28px;
  }

  .navbar-links {
    display: none;
  }

  .navbar .btn-outline-dark {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero {
    padding: 120px 0 48px;
  }

  .hero .subtitle {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .phone-mockup-wrapper {
    padding: 24px 0;
  }

  .phone-mockup {
    width: 220px;
  }

  .floating-card {
    display: none;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .features-grid .feature-card:last-child:nth-child(odd) {
    max-width: 100%;
  }

  .feature-card {
    padding: 0;
  }

  .feature-card .feature-visual {
    height: 160px;
  }

  .feature-card .feature-content {
    padding: 20px;
  }

  .feature-card h3 {
    font-size: 17px;
  }

  .feature-card p {
    font-size: 14px;
  }

  .steps {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .steps::before {
    display: none;
  }

  .pricing-cards {
    flex-direction: column;
    align-items: center;
  }

  .pricing-card {
    max-width: 100%;
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero,
  .features,
  .how-it-works,
  .pricing,
  .download-cta {
    padding: var(--section-padding-mobile) 0;
  }
}

/* ─── Tablet (768px – 1023px) ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: 44px;
  }

  .floating-card-price,
  .floating-card-alert {
    display: none;
  }

  .floating-card-chart {
    right: calc(100% + 12px);
  }

  .floating-card-stats {
    left: calc(100% + 12px);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ─── Desktop (1024px+) ─── */
@media (min-width: 1024px) {
  .container {
    padding: 0 40px;
  }
}

/* ─── Large Desktop (1440px+) ─── */
@media (min-width: 1440px) {
  .hero {
    padding: 160px 0 100px;
  }

  .floating-card-price {
    right: calc(100% + 40px);
  }

  .floating-card-alert {
    left: calc(100% + 40px);
  }

  .floating-card-chart {
    right: calc(100% + 48px);
  }

  .floating-card-stats {
    left: calc(100% + 40px);
  }
}