/* ═══════════════════════════════════════════════════════════════════
   ASTAA — responsive layer
   Breakpoints: 1180 · 1024 · 900 (nav switch) · 720 · 520
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── ≤ 1180px ───────── */
@media (max-width: 1180px) {
  :root {
    --gut: 1.5rem;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .float-capture {
    right: 0;
    width: 262px;
  }

  .float-revenue {
    left: -1%;
  }

  .float-reco {
    right: 7%;
  }
}

/* ───────── ≤ 1024px ───────── */
@media (max-width: 1024px) {

  /* hero collapses to one column; the photo stays as the section ground and
     the product cards drop into normal flow underneath the copy */
  .hero {
    min-height: 0;
    padding-bottom: 1rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .hero-copy {
    max-width: 640px;
  }

  .hero-lede {
    max-width: none;
  }

  .hero-visual {
    position: static;
    min-height: 0;
    display: grid;
    gap: 0.7rem;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }

  .float-capture,
  .float-revenue,
  .float-reco {
    position: relative;
    inset: auto;
    width: 100%;
  }

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

  .split {
    grid-template-columns: 1fr;
  }

  .split-body {
    padding-right: 0;
  }

  /* dashboard: drop the app sidebar */
  .panel[data-panel="dash"] {
    grid-template-columns: 1fr;
  }

  .app-side {
    display: none;
  }

  /* capture: stack terminal → result */
  .cap-wrap {
    grid-template-columns: 1fr;
  }

  .cap-arrow {
    justify-self: center;
    rotate: 90deg;
  }

  .acc-wrap {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }
}

/* ───────── ≤ 900px — nav switches to the mobile sheet ───────── */
@media (max-width: 900px) {

  /* A backdrop-filter makes an element the containing block for any fixed
     descendant, which would trap the menu sheet (and the close button)
     inside the bar instead of the viewport. No blur below this width. */
  .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .navbar.is-stuck {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: var(--line);
  }

  .nav-toggle {
    display: flex;
    order: 3;
    position: relative;
    z-index: 1101;
  }

  .nav-actions {
    order: 2;
    margin-left: auto;
  }

  .nav-call {
    display: grid;
  }

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

  /* full-screen menu sheet */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: rgba(8, 18, 32, 0.97);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-links a {
    width: min(320px, 84vw);
    margin-inline: auto;
    padding: 0.95rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    box-shadow: none;
    font-size: 1.02rem;
    text-align: center;
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a:hover,
  .nav-links a.is-active {
    border-color: rgba(227, 169, 63, 0.5);
    background: rgba(227, 169, 63, 0.14);
    color: var(--gold-2);
  }

  .nav-toggle.is-open {
    position: fixed;
    top: 1rem;
    right: var(--gut);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
  }

  .nav-toggle.is-open span {
    background: #fff;
  }

  body.menu-open {
    overflow: hidden;
  }

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

  .topbar-hide-sm {
    display: none;
  }

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

  .mo.mo-lg {
    grid-column: span 2;
  }

  /* ecosystem stacks: nodes above and below the core */
  .eco-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.5rem;
  }

  .eco-col {
    width: min(420px, 100%);
    grid-template-columns: 1fr 1fr;
  }

  .eco-col:first-child .eco-node:hover,
  .eco-col:last-child .eco-node:hover {
    transform: translateY(-3px);
  }

  .eco-core {
    order: -1;
  }
}

/* ───────── ≤ 720px ───────── */
@media (max-width: 720px) {
  :root {
    --nav-h: 64px;
    --gut: 1.15rem;
  }

  .topbar {
    font-size: 0.72rem;
  }

  .topbar-left {
    display: none;
  }

  .topbar-inner {
    justify-content: center;
  }

  .topbar-right {
    gap: 1rem;
  }

  .hero-title {
    font-size: clamp(2.15rem, 9vw, 2.9rem);
  }

  .hero-cta .btn {
    flex: 1 1 auto;
  }

  /* three stacked cards is a lot of height on a phone */
  .float-reco {
    display: none;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem 1rem;
    border-radius: var(--r) var(--r) 0 0;
  }

  /* the rule only makes sense between columns, not between rows */
  .hero-stats .stat+.stat::before {
    display: none;
  }

  .hero-stats .stat:nth-child(even)::before {
    display: block;
    left: -0.5rem;
  }

  .pillars {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .plans {
    grid-template-columns: 1fr;
  }

  .plan.is-popular {
    order: -1;
  }

  .plan-head p {
    min-height: 0;
  }

  .app-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .showcase-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: var(--r-sm);
    scrollbar-width: none;
  }

  .showcase-tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: none;
  }

  .at-head,
  .at-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.2rem;
  }

  .at-head span:nth-child(2),
  .at-head span:nth-child(4) {
    text-align: right;
  }

  .at-row span:nth-child(2),
  .at-row span:nth-child(4) {
    text-align: right;
    justify-self: end;
  }

  .fields {
    grid-template-columns: 1fr;
  }

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

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }

  .fab {
    right: 1rem;
    bottom: 1rem;
    width: 50px;
    height: 50px;
  }

  .fab-tip {
    display: none;
  }
}

/* ───────── ≤ 520px ───────── */
@media (max-width: 520px) {

  /* on the narrowest screens the photograph and the copy carry the hero;
     one product card is enough to show the software is real */
  .float-revenue {
    display: none;
  }

  .hero-visual {
    max-width: none;
  }

  .eco-col {
    grid-template-columns: 1fr;
  }

  .mosaic {
    grid-template-columns: 1fr;
  }

  .mo,
  .mo.mo-lg {
    grid-column: span 1;
    aspect-ratio: 16 / 10;
  }

  .footer-cols {
    grid-template-columns: 1fr;
  }

  .map-stat {
    right: 1rem;
    top: 1rem;
    padding: 0.6rem 0.8rem;
  }

  .map-stat b {
    font-size: 1.3rem;
  }

  .map-legend {
    position: static;
    margin-top: 0.75rem;
    justify-content: center;
  }
}

/* ───────── print ───────── */
@media print {

  .topbar,
  .navbar,
  .fab,
  .scroll-progress,
  .marquee-wrap,
  .sec-bg,
  .sec-scrim,
  .sec-grain {
    display: none !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .on-dark,
  .on-dark h2,
  .on-dark h3 {
    color: #000 !important;
  }

  body {
    background: #fff;
  }
}

/* ───────── AUTOMATION CHAIN ───────── */
/* Below the seven-across layout the rail becomes a scroller; main.js keeps
   the live step centred, so the animation stays legible on a phone. */
@media (max-width: 1180px) {
  .chain-rail {
    grid-auto-columns: 178px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* room for the active card's lift and glow, which would otherwise clip */
    padding: 2.7rem 0.3rem 1.1rem;
    scrollbar-width: none;
  }

  .chain-rail::-webkit-scrollbar {
    display: none;
  }

  .wf-card {
    scroll-snap-align: center;
  }
}

@media (max-width: 520px) {
  .chain-rail {
    grid-auto-columns: 168px;
  }

  .wf-desc {
    font-size: 0.72rem;
  }
}