/* ==========================================================================
   PROTECH APP - RESPONSIVE STYLESHEET
   ========================================================================== */

/* 1. Large Desktops & HD Displays (<= 1440px) */
@media (max-width: 1440px) {
  .app-hero-floating-chip.chip-1 { left: -15px; }
  .app-hero-floating-chip.chip-2 { left: -20px; }
  .app-hero-floating-chip.chip-3 { right: -15px; }
  .app-hero-floating-chip.chip-4 { right: -20px; }
}

/* 2. Standard Laptops / Small Desktops (<= 1200px) */
@media (max-width: 1200px) {
  .app-modular-blocks-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .app-security-grid,
  .app-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-hero-floating-chip {
    display: none; /* Hide floating chips to avoid clutter on smaller desktop screens */
  }
  .app-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
  }
}

/* 3. Tablets / iPad Landscape (<= 1024px) */
@media (max-width: 1024px) {
  .app-nav,
  .app-header-actions .app-btn-secondary {
    display: none;
  }
  .app-mobile-menu-btn {
    display: flex;
  }
  .app-mockup-body {
    grid-template-columns: 1fr;
  }
  .app-mockup-sidebar {
    display: none;
  }
  .app-mockup-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-mockup-charts-grid {
    grid-template-columns: 1fr;
  }
  .app-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1rem;
  }
  .app-metric-item:nth-child(2)::after {
    display: none;
  }
  .app-pain-grid,
  .app-segments-grid,
  .app-testimonials-grid {
    grid-template-columns: 1fr;
  }
  .app-transformation-grid {
    grid-template-columns: 1fr;
  }
  .app-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .app-timeline-grid::before {
    display: none;
  }
  .app-dash-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-dash-charts-row {
    grid-template-columns: 1fr;
  }
  .app-convergence-flex {
    flex-direction: column;
    gap: 2rem;
  }
  .app-fragmented-nodes,
  .app-converged-core {
    width: 100%;
  }
  .app-convergence-connector {
    transform: rotate(90deg);
    padding: 1rem 0;
  }
}

/* 4. Small Tablets & Phablets (<= 768px) */
@media (max-width: 768px) {
  .app-section {
    padding: 4.5rem 0;
  }
  .app-section-lg {
    padding: 5.5rem 0;
  }
  .app-hero {
    padding-top: calc(var(--app-header-h) + 2rem);
    padding-bottom: 3.5rem;
  }
  .app-hero-headline {
    font-size: 2.3rem;
  }
  .app-hero-description {
    font-size: 1.05rem;
  }
  .app-hero-trust-pills {
    flex-direction: column;
    gap: 0.75rem;
  }
  .app-features-grid {
    grid-template-columns: 1fr;
  }
  .app-modular-blocks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-timeline-grid {
    grid-template-columns: 1fr;
  }
  .app-security-grid,
  .app-benefits-grid {
    grid-template-columns: 1fr;
  }
  .app-footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .app-whatsapp-hub-grid {
    grid-template-columns: 1fr;
  }
  .app-form-wrapper {
    padding: 1.75rem;
  }
  .app-form-grid {
    grid-template-columns: 1fr;
  }
  .app-form-group.full-width {
    grid-column: span 1;
  }
  .app-workflow-container {
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
  }
  .app-workflow-step {
    width: 100%;
  }
  .app-workflow-arrow {
    transform: rotate(90deg);
    align-self: center;
    margin: 0.25rem 0;
  }
  .app-integrations-diagram {
    height: auto;
    padding: 2rem 0;
    flex-direction: column;
    gap: 1.5rem;
  }
  .app-orbit-circle {
    display: none;
  }
  .app-integration-node {
    position: static;
    transform: none !important;
    width: 100%;
    justify-content: center;
  }
  .app-integration-core {
    width: 110px;
    height: 110px;
    font-size: 1.05rem;
  }
}

/* 5. Mobile Devices (<= 430px / 390px / 360px) */
@media (max-width: 430px) {
  .app-container {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
  .app-hero-headline {
    font-size: 1.95rem;
  }
  .app-hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .app-hero-cta-group .app-btn {
    width: 100%;
  }
  .app-metrics-grid {
    grid-template-columns: 1fr;
  }
  .app-metric-item::after {
    display: none;
  }
  .app-mockup-stats-grid {
    grid-template-columns: 1fr;
  }
  .app-dash-kpis {
    grid-template-columns: 1fr;
  }
  .app-modular-blocks-grid {
    grid-template-columns: 1fr;
  }
  .app-fragmented-nodes {
    grid-template-columns: 1fr;
  }
  .app-whatsapp-floating span {
    display: none;
  }
  .app-whatsapp-floating {
    padding: 0.85rem;
    border-radius: 50%;
  }
}

/* Accessibility / Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}