/* ==========================================================================
   WasiCo Technologies — Responsive overrides
   Desktop-first: 1440+ large, ≤1180 laptop, ≤1024 tablet, ≤768 phone-large,
   ≤480 phone.
   ========================================================================== */

@media (min-width: 1440px) {
  :root {
    --container: 1280px;
  }
}

/* ---------- Laptop ---------- */
@media (max-width: 1180px) {
  .nav-links > li > a {
    padding: 0 11px;
  }
  .p-oms {
    left: -2%;
  }
  .p-erp {
    right: -2%;
  }
  .products-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 880px;
    margin-inline: auto;
  }
  /* Cards turn horizontal: visual left, content right */
  .product-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .product-visual {
    height: auto;
    min-height: 260px;
    margin: 10px 0 10px 10px;
  }
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .flow li::after {
    display: none;
  }
  .big-dash {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  :root {
    --header-h: 66px;
  }

  .nav-primary {
    display: none;
  }
  .nav-toggle {
    display: block;
  }

  .hero-grid,
  .product-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-copy {
    max-width: 720px;
  }
  .hero-visual {
    max-width: 640px;
    width: 100%;
    margin-inline: auto;
  }

  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-7);
  }
  .timeline-track {
    display: none;
  }

  .contact-grid,
  .value-prop,
  .about-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }

  .module-grid,
  .usecase-grid,
  .product-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .big-main .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Large phone ---------- */
@media (max-width: 768px) {
  :root {
    --gutter: 16px;
  }

  .nav-actions .btn {
    display: none;
  }

  .hero-values {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .hero-ctas .btn {
    flex: 1 1 220px;
  }

  /* Simplified hero visual: main dashboard + two compact panels, no lines */
  .hero-visual,
  .hero-visual .stage {
    min-height: 0;
  }
  .hero-visual .stage {
    padding-top: 70px;
    padding-bottom: 96px;
  }
  .hero-visual .dash-main {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }
  .hero-lines,
  .p-erp {
    display: none;
  }
  .p-oms {
    top: 0;
    left: auto;
    right: 0;
    width: 200px;
  }
  .p-hr {
    bottom: 0;
    left: 0;
    width: 220px;
  }
  .float-panel .float-inner {
    animation: none;
  }
  .dash-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .dash-side {
    display: none;
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpis .kpi:nth-child(3) {
    display: none;
  }

  .product-card {
    display: flex;
  }
  .product-visual {
    min-height: 0;
    height: 190px;
    margin: 10px 10px 0;
  }
  .product-body {
    padding: 20px;
  }

  .why-grid,
  .module-grid,
  .usecase-grid,
  .principles,
  .product-strip,
  .related-grid,
  .split-2,
  .value-points {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Vertical timeline */
  .timeline {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    gap: 0;
  }
  .timeline-track {
    display: block;
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .timeline-track span {
    transform-origin: top;
  }
  .step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 20px;
    padding-bottom: 32px;
  }
  .step:last-child {
    padding-bottom: 0;
  }
  .step-dot {
    grid-row: span 3;
  }
  .step-num {
    margin-top: 4px;
  }

  .impact-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .impact-arrow {
    height: 40px;
  }
  .impact-arrow::before {
    left: 50%;
    right: auto;
    top: 4px;
    bottom: 4px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(148, 163, 255, 0.15), rgba(124, 92, 246, 0.8));
  }
  .impact-arrow .icon {
    transform: rotate(90deg);
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-actions .btn {
    width: 100%;
  }
  .form-actions .hint {
    max-width: none;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .big-dash {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .big-side {
    display: none;
  }
  .big-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .preview-wrap {
    border-radius: 18px;
  }

  .faq .answer {
    padding-right: 0;
  }
  .related-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .cta-band .cta-actions .btn {
    flex: 1 1 220px;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 480px) {
  .brand-text span {
    display: none;
  }
  .hero-badge {
    font-size: 11px;
  }
  .p-oms {
    width: 172px;
  }
  .p-hr {
    width: 196px;
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-method {
    grid-template-columns: 40px 1fr;
  }
  .contact-method > .icon {
    display: none;
  }
  .big-main .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .table th:nth-child(n + 4),
  .table td:nth-child(n + 4) {
    display: none;
  }
}

/* ---------- Pointer / hover capability ---------- */
@media (hover: none) {
  .product-card:hover,
  .module:hover,
  .related-card:hover {
    transform: none;
  }
}

/* No-JS: keep navigation usable without the menu script */
@media (max-width: 1024px) {
  html:not(.js) .nav-toggle {
    display: none;
  }
  html:not(.js) .nav-primary {
    display: block;
    position: static;
  }
  html:not(.js) .site-header {
    position: absolute;
    height: auto;
  }
  html:not(.js) .nav {
    flex-wrap: wrap;
    padding-block: 12px;
  }
  html:not(.js) .nav-links {
    flex-wrap: wrap;
  }
  html:not(.js) .nav-menu {
    display: none;
  }
}