/* Responsive recomposition. Breakpoints: 1180 (laptop), 980 (tablet), 720 (large phone), 420 (small phone). */

@media (max-width: 1180px) {
  .nav-link { padding: 10px 10px; }
  .header-actions .link-quiet { display: none; }
  .showcase-panel .check-list { grid-template-columns: 1fr; }
  .hero-visual .phone-hero { width: 29%; }
}

@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .primary-nav { display: none; }
  .nav-burger { display: inline-flex; }
  .header-actions { margin-left: auto; }

  /* Hero: copy first, visual becomes a wide stage beneath it */
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 32px); padding-bottom: 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy { text-align: left; }
  .hero-visual { max-width: 640px; margin: 8px auto 24px; }
  .scroll-cue { display: none; }

  .capability-rail { grid-template-columns: 1fr 1fr; }
  .capability-rail li:nth-child(3) { border-left: 0; padding-left: 0; }
  .capability-rail li:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-panel { min-height: 0; }
  .showcase-stage { min-height: 460px; }

  .section-head-split { flex-direction: column; align-items: flex-start; }
  .section-head-split > p { max-width: 40rem; }

  .eco-layout { grid-template-columns: 1fr; }
  .eco-scene { min-height: 460px; }

  .fx-body { grid-template-columns: 1fr; }
  .fx-detail { position: relative; top: 0; min-height: 0; order: -1; }

  .flow { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .flow::before, .flow::after { display: none; }

  .dash { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; overflow-x: auto; padding: 8px; }
  .dash-nav { flex: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-charts { grid-template-columns: 1fr; }

  .benefit { grid-template-columns: 1fr; }
  .benefit:nth-child(even) .benefit-visual { order: 0; }
  .benefit-visual { min-height: 320px; }

  .faq-grid { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
  .faq-photo { display: none; }

  .cta-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .header-actions .btn-sm { display: none; }
  .hero-copy .display br { display: none; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .trust-list { gap: 10px 16px; }

  /* Hero visual recomposed: thali centred, phone tucked right, two cards only */
  .hero-visual { aspect-ratio: 1 / 1.02; }
  .thali-stage { inset: 6% 0 10% 0; }
  .fc-menu { display: none; }
  .fc-wallet { top: 0; right: auto; left: 0; }
  .fc-order { left: 0; bottom: 6%; }
  .hero-visual .phone-hero { width: 34%; right: 0; bottom: 0; }
  .float-card { padding: 8px 12px 8px 8px; gap: 8px; }
  .float-card strong { font-size: 0.85rem; }
  .fc-icon { width: 32px; height: 32px; border-radius: 10px; }
  .hero-visual .hero-tag { bottom: -34px; left: 0; right: auto; }

  .overview-photo { aspect-ratio: 4 / 3.4; }
  .ov-p2 { top: 14px; right: 14px; padding: 10px 12px; }
  .ov-p2 strong { font-size: 1.4rem; }
  .ov-p1 { position: relative; left: auto; bottom: auto; width: auto; margin: -36px 14px 0; }
  .overview-caption { top: 12px; left: 14px; right: auto; bottom: auto; }
  .capability-rail { grid-template-columns: 1fr; }
  .capability-rail li, .capability-rail li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .capability-rail li:first-child { border-top: 0; }

  .seg-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-md); width: 100%; }
  .seg-tabs [role="tab"] { border-radius: 12px; justify-content: center; padding: 0 10px; }
  .showcase-stage { min-height: 400px; }
  .showcase-stage .proto-tag { white-space: normal; text-align: center; width: max-content; max-width: 100%; }
  .tablet { padding: 10px; border-radius: 20px; transform: none; }
  .laptop { transform: none; }
  .app, .adm { font-size: 8px; }

  .eco-scene { min-height: 400px; }
  .eco-panel { padding: 16px; }

  .flow { grid-template-columns: 1fr 1fr; }
  .flow-detail { grid-template-columns: auto 1fr; padding: 20px; }
  .fd-step { display: none; }

  .dash-main { padding: 14px; }
  .dash-toolbar .field { flex: 1 1 140px; }
  .dash-toolbar select { min-width: 0; width: 100%; }
  .dash-toolbar .seg { margin-left: 0; }
  .kpi strong { font-size: 1.25rem; }
  .browser-url { display: none; }
  .browser-bar { justify-content: space-between; }

  .shield-wrap { transform: scale(0.82); }
  .oc-1 { left: -18%; } .oc-2 { right: -22%; } .oc-3 { left: -22%; } .oc-4 { right: -12%; }

  .back-to-top { right: 12px; bottom: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .seg-tabs [role="tab"] .lucide { display: none; }
  .flow { grid-template-columns: 1fr; }
  .flow-btn { flex-direction: row; text-align: left; align-items: center; }
  .flow-node { width: 56px; height: 56px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }

}

/* Touch devices: no hover-driven tilt/parallax */
@media (hover: none) {
  .tilt { transform: none !important; }
}

@media (max-width: 980px) {
  .benefits-intro { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fx-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .showcase-copy .seg-tabs { max-width: none; }
  .plate-strip figcaption { display: none; }
}

@media (max-width: 1180px) {
  .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-card.is-xl { grid-row: auto; }
}
@media (max-width: 720px) {
  .apps-grid { grid-template-columns: 1fr; }
  .app-card.is-xl, .app-card.is-wide { grid-column: auto; flex-direction: column; align-items: stretch; }
  .app-card.is-xl .app-visual { flex-basis: auto; }
  .app-card.is-wide ul { grid-template-columns: 1fr; }
  .desk-window { transform: none; }
  .app-phone { width: 200px; }
}

@media (max-width: 720px) {
  .app-card.is-half { grid-column: auto; flex-direction: column; }
}