/* Responsive Design - Screen Fittings */

/* Tablet and smaller (max-width: 1024px) */
@media (max-width: 1024px) {
  .title {
    font-size: 4rem;
  }
  
  .subtitle {
    font-size: 1rem;
    max-width: 600px;
    padding: 0 20px;
  }
  
  .stat {
    min-width: 180px;
    padding: 20px 24px;
  }
}

/* Tablet portrait and smaller (max-width: 768px) */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
  
  .topbar.container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .topbar {
    padding: 12px 16px !important;
  }
  
  .brand {
    font-size: 0.9rem;
    left: 16px !important;
  }
  
  .brand span:not(.dot) {
    display: none;
  }
  
  .actions {
    gap: 8px;
    right: 16px !important;
  }
  
  .actions .btn {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }
  
  .hero {
    height: calc(100vh - 60px);
    padding: 0 16px;
  }
  
  .title {
    font-size: 2.5rem;
    letter-spacing: 0.08em;
    margin-bottom: 24px;
  }
  
  .kicker {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
  }
  
  .subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 100%;
    padding: 0 10px;
    margin-bottom: 32px;
  }
  
  .cta {
    flex-direction: column;
    gap: 16px;
    margin: 32px 0 40px;
    width: 100%;
    max-width: 100%;
  }
  
  .cta button,
  .cta .btn {
    width: 100%;
    max-width: 100%;
    min-width: unset !important;
    padding: 16px 32px !important;
    font-size: 0.95rem !important;
  }
  
  .stats {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    width: 100%;
    padding: 0 16px;
  }
  
  .stat {
    width: 100%;
    max-width: 100%;
    min-width: unset;
    padding: 20px 24px;
  }
  
  .num {
    font-size: 1.1rem;
  }
  
  .label {
    font-size: 0.9rem;
  }
}

/* Mobile phones (max-width: 576px) */
@media (max-width: 576px) {
  .topbar.container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  .topbar {
    padding: 10px 12px !important;
  }
  
  .brand {
    font-size: 0.85rem;
    gap: 8px;
  }
  
  .dot {
    width: 8px;
    height: 8px;
  }
  
  .actions {
    gap: 6px;
  }
  
  .actions .btn {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }
  
  .actions .btn.ms-2 {
    margin-left: 0 !important;
  }
  
  .hero {
    padding: 0 12px;
    height: calc(100vh - 50px);
  }
  
  .title {
    font-size: 2rem;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
  }
  
  .kicker {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
  }
  
  .kicker::after {
    width: 40px;
  }
  
  .subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0;
    margin-bottom: 28px;
  }
  
  .cta {
    gap: 12px;
    margin: 24px 0 32px;
  }
  
  .cta button,
  .cta .btn {
    padding: 14px 24px !important;
    font-size: 0.9rem !important;
  }
  
  .stats {
    gap: 12px;
    margin-top: 24px;
    padding: 0 12px;
  }
  
  .stats::before {
    width: 60px;
    top: -20px;
  }
  
  .stat {
    padding: 18px 20px;
  }
  
  .num {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  
  .label {
    font-size: 0.85rem;
  }
}

/* Very small screens (max-width: 375px) */
@media (max-width: 375px) {
  .title {
    font-size: 1.75rem;
  }
  
  .subtitle {
    font-size: 0.8rem;
  }
  
  .cta button,
  .cta .btn {
    padding: 12px 20px !important;
    font-size: 0.85rem !important;
  }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    height: auto;
    min-height: calc(100vh - 60px);
    padding: 20px;
  }
  
  .title {
    font-size: 2rem;
    margin-bottom: 16px;
  }
  
  .subtitle {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  
  .cta {
    margin: 20px 0 24px;
  }
  
  .stats {
    margin-top: 20px;
  }
}

/* Prevent content from being too wide on large screens */
@media (min-width: 1400px) {
  .hero {
    max-width: 1200px;
  }
}