/* ====================================================================
   MOBILE RESPONSIVE OVERRIDES (320px – 768px)
   Pure additive styles — zero changes to desktop layout.
   ==================================================================== */

/* ===== 1. BASE / VIEWPORT ===== */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 80px;
  }

  body {
    overflow-x: hidden;
  }

  img,
  svg {
    max-width: 100%;
    height: auto;
  }
}

/* ===== 2. NAVBAR / HEADER — FULL-SCREEN OVERLAY ===== */
@media (max-width: 768px) {
  .mobile-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    z-index: 10001;
  }

  /* Hide hamburger when overlay is open */
  .mobile-toggle.active {
    display: none;
  }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    /* Override the right-side drawer from desktop media query */
    right: auto !important;
    border-left: none;
  }

  .nav-links.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    right: auto !important;
  }

  .nav-links a {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--text-primary);
  }

  .nav-links a:not(.nav-cta)::after {
    display: none;
  }

  .nav-cta {
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright)) !important;
    color: #ffffff !important;
    padding: 0.85rem 2rem !important;
    border-radius: var(--radius-md) !important;
    width: auto;
  }

  /* Close button (X) styled inside the overlay */
  .nav-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    line-height: 1;
    transition: background 0.2s ease;
  }

  .nav-close-btn:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  /* Mobile overlay backdrop: clickable outside area */
  .mobile-nav-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile-nav-backdrop.active {
    opacity: 1;
    visibility: visible;
  }
}

/* Hide close button and backdrop on desktop */
@media (min-width: 769px) {
  .nav-close-btn,
  .mobile-nav-backdrop {
    display: none !important;
  }
}

/* ===== 3. HERO SECTION ===== */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 4rem 1rem 2rem;
  }

  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
    padding: 0 0.5rem;
  }

  .hero-left {
    text-align: center;
    order: 0;
  }

  .hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    max-width: none;
    letter-spacing: -1px;
  }

  .hero .subtitle {
    font-size: 0.95rem;
    max-width: none;
  }

  .hero-badge {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-buttons {
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* Hero right panel with ERP diagram */
  .hero-right {
    order: 1;
    min-height: auto;
    perspective: none;
    width: 100%;
    padding: 0;
  }
}

/* ===== 4. ERP CONNECTOR DIAGRAM (Net Map) ===== */
@media (max-width: 768px) {
  .net-map {
    width: 100%;
    max-width: 100%;
    min-height: 360px;
    transform: none !important;
    padding: 28px 16px;
    border-radius: 18px;
  }

  .net-erps {
    left: 10px;
    padding: 14px 0;
  }

  .net-erp-pill {
    width: 80px;
    height: 36px;
    font-size: 9px;
    padding: 0 6px;
    border-radius: 10px;
    gap: 4px;
  }

  .net-pill-logo {
    height: 18px;
    width: 18px;
  }

  .net-hub {
    width: 110px;
    height: 48px;
    font-size: 10px;
    border-radius: 14px;
  }

  .net-hub-logo {
    width: 24px;
    height: 8px;
  }

  .net-hub-label {
    font-size: 0.6rem;
  }

  .net-asp {
    right: 10px;
  }

  .net-asp-pill {
    width: 85px;
    height: 36px;
    font-size: 9px;
    padding: 0 6px;
    border-radius: 10px;
  }

  .net-packet {
    display: none;
  }

  .net-hub-ring {
    inset: -4px;
  }
}

/* Very small screens: further reduce diagram */
@media (max-width: 380px) {
  .net-map {
    min-height: 300px;
    padding: 20px 10px;
  }

  .net-erps {
    left: 6px;
  }

  .net-erp-pill {
    width: 66px;
    height: 32px;
    font-size: 8px;
    padding: 0 4px;
  }

  .net-pill-logo {
    height: 14px;
    width: 14px;
  }

  .net-hub {
    width: 90px;
    height: 42px;
    font-size: 9px;
  }

  .net-asp-pill {
    width: 72px;
    height: 32px;
    font-size: 8px;
    padding: 0 4px;
  }

  .net-asp {
    right: 6px;
  }
}

/* ===== 5. STATS BAR ===== */
@media (max-width: 768px) {
  .hero-stats-bar {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    width: 100%;
    margin: 2rem auto 0;
    border-radius: 16px;
  }

  .stat-item {
    text-align: center;
  }

  .stat-number,
  .stat-suffix {
    font-size: 1.75rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .stat-divider {
    width: 60px;
    height: 1px;
  }
}

/* ===== 6. HOW IT WORKS — FLOW BAR + TIMELINE ===== */
@media (max-width: 768px) {
  /* Flow bar: stack vertically */
  .hiw-flow-bar {
    flex-direction: column;
    gap: 0;
    padding: 1.25rem 1rem;
    margin: 1.5rem auto 2rem;
  }

  .hiw-flow-node {
    padding: 1rem 0.75rem;
    width: 100%;
  }

  .hiw-flow-node-icon {
    font-size: 1.5rem;
  }

  .hiw-flow-node-label {
    font-size: 0.82rem;
  }

  .hiw-flow-node-sub {
    font-size: 0.7rem;
  }

  .hiw-flow-connector {
    flex: 0;
    padding: 0.5rem 0;
    transform: rotate(90deg);
  }

  .hiw-flow-line {
    width: 40px;
    height: 2px;
  }

  .hiw-flow-arrow-icon {
    font-size: 0.9rem;
  }

  .hiw-flow-line-label {
    font-size: 0.62rem;
  }

  /* Timeline: left-aligned single column */
  .hiw-pipeline {
    padding: 1rem 0;
  }

  .hiw-tl-spine {
    left: 20px;
  }

  .hiw-tl-step {
    grid-template-columns: 40px 1fr;
    gap: 0 0.75rem;
  }

  .hiw-tl-marker {
    grid-column: 1;
    justify-content: center;
  }

  .hiw-tl-step--right .hiw-tl-card,
  .hiw-tl-step--left .hiw-tl-card {
    grid-column: 2;
    text-align: left;
    flex-direction: row;
  }

  .hiw-tl-circle {
    width: 34px;
    height: 34px;
    font-size: 0.7rem;
  }

  .hiw-tl-card {
    padding: 1rem;
    gap: 0.75rem;
  }

  .hiw-tl-card-icon {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
  }

  .hiw-tl-card-body h4 {
    font-size: 0.88rem;
  }

  .hiw-tl-card-body p {
    font-size: 0.8rem;
  }

  .hiw-validation-row {
    gap: 0.3rem;
  }

  .hiw-vtag {
    font-size: 0.62rem;
    padding: 0.15rem 0.4rem;
  }

  .hiw-vtag-arrow {
    font-size: 0.6rem;
  }

  .hiw-tl-chips span {
    font-size: 0.62rem;
    padding: 0.12rem 0.4rem;
  }

  .hiw-badge {
    font-size: 0.65rem;
    padding: 0.18rem 0.6rem;
  }
}

/* ===== 7. WE HANDLE vs ASP PLATFORM HANDLES ===== */
@media (max-width: 768px) {
  .hiw-split {
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 0;
  }

  .hiw-split-col {
    width: 100%;
  }

  .hiw-split-us {
    order: 1;
    margin-bottom: 1.5rem;
  }

  .hiw-split-divider {
    display: none;
  }

  .hiw-split-asp {
    order: 2;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }

  .hiw-split-heading {
    font-size: 0.75rem;
    margin-bottom: 1rem;
  }

  .hiw-split-col ul li {
    font-size: 0.85rem;
    text-align: left;
    justify-content: flex-start;
  }
}

/* ===== 8. ERP SEARCH / LISTING ===== */
@media (max-width: 768px) {
  .erp-search-wrapper {
    max-width: 100%;
  }

  .search-input-container {
    flex-wrap: wrap;
  }

  #erpSearch {
    font-size: 0.95rem;
    padding: 0.9rem 7rem 0.9rem 2.75rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  #erpSearch::placeholder {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.82rem;
  }

  .search-icon {
    left: 0.9rem;
    width: 18px;
    height: 18px;
  }

  .search-count {
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
    right: 0.6rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .erp-card {
    padding: 1.5rem;
  }

  .erp-card h4 {
    font-size: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .erp-protocol {
    font-size: 0.75rem;
  }

  .erp-description {
    font-size: 0.85rem;
  }

  .erp-tier {
    font-size: 0.7rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-toggle-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .search-count {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
    max-width: 100%;
    margin-top: 0.5rem;
  }

  #erpSearch {
    padding-right: 1rem;
  }
}

/* ===== 9. TRUST & CREDENTIALS / BENEFITS / COMPLIANCE CARDS ===== */
@media (max-width: 768px) {
  .trust-bar {
    padding: 1rem 0;
  }

  .trust-bar-content {
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem 1rem;
  }

  .trust-bar-divider {
    display: none;
  }

  .trust-item {
    justify-content: center;
  }

  .compliance-infra-section {
    padding: 3rem 0;
  }

  .compliance-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
    margin-top: 2rem;
  }

  .compliance-card {
    padding: 1.5rem;
    width: 100%;
  }

  .compliance-icon {
    margin-bottom: 1rem;
  }

  .compliance-card h3 {
    font-size: 1.1rem;
  }

  .compliance-card p {
    font-size: 0.88rem;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .benefit-item {
    padding: 1.25rem;
    gap: 1rem;
  }

  .benefit-icon {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }

  .benefit-content h3 {
    font-size: 1rem;
  }

  .benefit-content p {
    font-size: 0.85rem;
  }
}

/* ===== 10. FOOTER ===== */
@media (max-width: 768px) {
  footer {
    padding: 2.5rem 1rem 1.5rem;
  }

  .footer-content {
    padding: 0;
  }

  .footer-grid {
    flex-direction: column;
    gap: 2rem;
    margin: 1rem 0 2rem;
  }

  .footer-brand {
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .footer-brand p {
    max-width: 100%;
    text-align: center;
    font-size: 0.88rem;
  }

  .footer-brand .logo {
    justify-content: center;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-section {
    width: 100%;
  }

  .footer-section h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .footer-section ul {
    gap: 0.65rem;
  }

  .footer-section a {
    font-size: 0.9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .footer-contact-info {
    font-size: 0.85rem;
    word-break: break-word;
  }

  .footer-contact-info p {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .footer-bottom {
    padding-top: 1.5rem;
    text-align: center;
  }

  .footer-bottom p {
    font-size: 0.8rem;
    word-break: break-word;
  }
}

/* ===== 11. ANNOUNCEMENT BANNER ===== */
@media (max-width: 768px) {
  .urgent-banner {
    font-size: 0.85rem;
    padding: 0.65rem 0.75rem;
  }

  .urgent-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .urgent-content p {
    white-space: normal;
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.45;
  }

  .banner-cta-glass {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    white-space: normal;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .pulse-dot.alert {
    display: none;
  }
}

/* ===== 12. GENERAL MOBILE RULES ===== */
@media (max-width: 768px) {
  /* Sections: reduce padding */
  .section {
    padding: 2rem 1rem;
  }

  .section-header {
    margin-bottom: 0.5rem;
  }

  .section-title {
    font-size: clamp(1.35rem, 5.5vw, 1.8rem);
  }

  .section-subtitle {
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .section-label {
    font-size: 0.72rem;
    padding: 0.35rem 1rem;
  }

  /* Challenge card */
  .challenge-card {
    padding: 1.5rem 1rem;
  }

  .challenge-header h3 {
    font-size: 1.05rem;
  }

  .challenge-note {
    font-size: 0.82rem;
    padding: 0.75rem 1rem;
  }

  /* Features grid */
  .features-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "b"
      "c"
      "d"
      "e"
      "f";
    gap: 1rem;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .feature-card--hero {
    padding: 1.75rem;
  }

  .feature-card--hero h3 {
    font-size: 1.15rem;
  }

  .feature-card h3 {
    font-size: 1rem;
  }

  .feature-card p {
    font-size: 0.85rem;
  }

  /* Developer showcase */
  .developer-showcase {
    padding: 1.5rem 1rem;
  }

  .code-preview {
    border-radius: 10px;
  }

  .code-body {
    font-size: 0.68rem;
    padding: 1rem;
    overflow-x: auto;
  }

  .tools-showcase {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .tool-card {
    padding: 1rem 0.75rem;
  }

  .tool-icon {
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
  }

  .tool-card h4 {
    font-size: 0.82rem;
  }

  .tool-card p {
    font-size: 0.7rem;
  }

  .integration-badge {
    font-size: 0.82rem;
    padding: 0.65rem 1.25rem;
    margin-top: 1.5rem;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Deployment cards */
  .deployment-options {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .deployment-card {
    padding: 1.75rem 1.25rem;
  }

  .deployment-card h3 {
    font-size: 1.2rem;
  }

  .deployment-card p {
    font-size: 0.88rem;
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .pricing-card {
    padding: 2rem 1.5rem;
  }

  .pricing-amount .value {
    font-size: 2.25rem;
  }

  .pricing-features li {
    font-size: 0.85rem;
  }

  /* FAQ */
  .faq-question {
    font-size: 0.95rem;
    padding: 1.15rem;
    min-height: 44px;
  }

  .faq-item.active .faq-answer {
    padding: 0.5rem 1.15rem 1.15rem;
  }

  .faq-answer p {
    font-size: 0.88rem;
  }

  /* Final CTA */
  .final-cta {
    padding: 2rem 1.25rem;
  }

  .final-cta h2 {
    font-size: clamp(1.3rem, 5vw, 1.75rem);
  }

  .final-cta p {
    font-size: 0.9rem;
  }

  .final-cta .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .final-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Touch targets */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Back to top */
  .back-to-top {
    width: 44px;
    height: 44px;
    bottom: 1.25rem;
    right: 1.25rem;
  }

  /* Scroll indicator */
  .scroll-indicator {
    display: none;
  }

  /* Marquee strip */
  .marquee-strip {
    padding: 0.5rem 0 0.65rem;
  }

  .marquee-label {
    font-size: 0.65rem;
    margin-bottom: 0.4rem;
  }

  /* No horizontal overflow */
  .hero-content,
  .hero-left,
  .hero-right,
  .section,
  .footer-content,
  .footer-grid {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ERP marquee items */
  .marquee-item {
    padding: 0.3rem 0.6rem;
  }

  .marquee-item img {
    height: 20px;
  }

  /* Dev modal on mobile */
  .dev-modal-box {
    margin: 1rem;
    padding: 2rem 1.5rem;
    border-radius: 20px;
    max-width: calc(100vw - 2rem);
  }

  .dev-modal-box h2 {
    font-size: 1.35rem;
  }

  .dev-modal-box p {
    font-size: 0.88rem;
  }

  /* Hero parallax / canvas */
  .hero::before {
    width: 300px;
    height: 300px;
  }

  .hero::after {
    width: 350px;
    height: 300px;
  }

  /* Proof row */
  .hero-proof {
    justify-content: center;
  }
}

/* ===== EXTRA SMALL SCREENS (320px–480px) ===== */
@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(1.4rem, 7vw, 1.8rem);
    letter-spacing: -1px;
  }

  .hero .subtitle {
    font-size: 0.88rem;
  }

  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.88rem;
  }

  .section-title {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
  }

  .tools-showcase {
    grid-template-columns: 1fr;
  }

  .erp-ecosystem-grid {
    grid-template-columns: 1fr;
  }

  .urgent-content p {
    font-size: 0.72rem;
  }

  .banner-cta-glass {
    font-size: 0.72rem;
    padding: 0.35rem 0.8rem;
  }

  .hiw-flow-node-icon {
    font-size: 1.25rem;
  }

  .hiw-flow-node-label {
    font-size: 0.75rem;
  }

  .hiw-flow-node-sub {
    font-size: 0.65rem;
  }

  .pricing-amount .value {
    font-size: 2rem;
  }

  .footer-brand .logo-img {
    height: 32px;
  }

  .compliance-card {
    padding: 1.25rem;
  }
}