/* ===== Final Clean Layout Fixes ===== */

/* Desktop Fix: Gravity Problem - Reduce top padding and align to start */
@media (min-width: 1025px) {
  .hero {
    padding: 120px 0 100px; /* Increased from 80px to 120px for better spacing */
  }

  .hero-content {
    align-items: flex-start; /* Changed from center to start for better visual balance */
  }
}

/* Mobile Fix: Hide ALL phone mockups and fix padding */
@media (max-width: 768px) {
  .hero {
    padding: 80px 20px 60px; /* Increased top padding for better spacing */
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 15px; /* Added container padding */
  }

  .hero-text {
    order: 1;
    text-align: center;
    width: 100%;
  }

  /* Hide ALL phone mockups on mobile as recommended */
  .hero-image,
  .ai-showcase-image,
  .download-image {
    display: none !important;
  }

  .hero-stats {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    padding-top: 32px;
    flex-wrap: wrap;
  }

  .stat {
    text-align: center;
    min-width: 110px;
    flex: 1;
  }

  .hero-cta {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 16px 32px;
    font-size: 16px;
  }
}

/* ===== Basic Interactive States (Minimal) ===== */

/* Button hover states */
.btn-primary:hover,
.btn-outline:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Feature card hover */
.feature-card:hover {
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* Stat hover */
.stat:hover .stat-number {
  transform: scale(1.03);
  transition: all 0.2s ease;
}

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