/* ==========================================================================
   GIG FMI — responsive layer (min-width enhancements on top of style.css)
   Tested widths: 320 · 360 · 375 · 390 · 430 · 768 · 1024 · 1280 · 1440 · 1920
   ========================================================================== */

/* ---------- very small phones (320–359) ---------- */
@media (max-width: 359.98px) {
  :root { --gutter: 14px; }
  .brand img { height: 57px; }
  .btn { padding: 0 18px; }
  .hero__ctas .btn { width: 100%; }
  .hero__visual { height: 420px; }
  .hero__phone--main { --w: 206px; margin-left: -103px; }
  .hero__phone--left { --w: 170px; margin-left: -205px; }
  .hero__phone--right { --w: 170px; margin-left: 35px; }
  .float-card--chip { margin-left: -128px; font-size: 0.72rem; }
  .float-card--track { width: 180px; left: 6px; top: 230px; }
  .float-card--collab { width: 170px; right: 6px; }
  .store-btn { padding: 8px 14px 8px 12px; }
  .acc-panel__inner { padding-right: 0; }
  .testi__date { display: none; }
}

/* ---------- large phones ---------- */
@media (min-width: 400px) {
  .hero__visual { height: 500px; }
  .hero__phone--main { --w: 250px; margin-left: -125px; }
  .hero__phone--left { margin-left: -262px; }
  .hero__phone--right { margin-left: 66px; }
  .float-card--track { left: 16px; }
  .float-card--collab { right: 16px; }
}

@media (min-width: 560px) {
  .store-row { flex-wrap: nowrap; }
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .data-cols { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr 1fr; }
  .testi__dot span { display: block; }
}

/* ---------- tablet ---------- */
@media (min-width: 768px) {
  :root { --gutter: 28px; }
  .brand img { height: 72px; }

  .hero__visual { height: 580px; margin-inline: 0; }
  .hero__phone--main { --w: 290px; margin-left: -145px; top: 24px; }
  .hero__phone--left { --w: 230px; margin-left: -330px; top: 90px; }
  .hero__phone--right { --w: 230px; margin-left: 100px; top: 90px; }
  .float-card--chip { margin-left: -300px; top: 40px; font-size: 0.85rem; }
  .float-card--track { width: 240px; left: 4%; top: 320px; padding: 16px; }
  .float-card--collab { width: 228px; right: 4%; top: 170px; padding: 16px; }

  .proof__inner { grid-template-columns: 240px 1fr; gap: 32px; }

  .about__showcase { grid-template-columns: 1fr 1fr; min-height: 420px; }
  .audience { padding: 48px 44px; }
  .about__screens { height: auto; min-height: 420px; }
  .about__screens .phone--a { --w: 230px; margin-left: -170px; top: 56px; }
  .about__screens .phone--b { --w: 210px; margin-left: 0; top: 104px; }

  .feature-stage { min-height: 460px; }

  .showcase__device .phone { --w: 290px; }

  .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger__item { padding: 32px 28px 32px 4px; }
  .ledger__item:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--line); }

  .testi__stage { padding: 44px 40px; min-height: 400px; }
  .testi__quote-mark { right: 40px; top: 34px; width: 48px; height: 48px; }

  .cta-panel { padding: 64px 48px 0; }
  .cta-panel__visual { height: 340px; }

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

  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .form { padding: 36px; }
  .del-step { padding: 24px; }
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 32px; --header-h: 92px; }

  .nav { display: block; }
  .burger { display: none; }
  .mobile-menu { display: none; }
  .header-actions .btn { display: inline-flex; }

  .hero { min-height: min(100vh, 980px); display: flex; flex-direction: column; }
  .hero > .container { flex: 1; display: flex; }
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 24px; width: 100%; }
  .hero__title { font-size: clamp(3.2rem, 1rem + 3.6vw, 4.6rem); }
  .hero__copy { padding-bottom: 72px; }
  .hero__lead { max-width: 470px; }
  .hero__visual { height: 600px; align-self: end; }
  .hero__phone--main { --w: 260px; margin-left: -130px; top: 40px; }
  .hero__phone--left { --w: 200px; margin-left: -232px; top: 110px; }
  .hero__phone--right { --w: 200px; margin-left: 40px; top: 110px; }
  .float-card--chip { margin-left: -230px; top: 70px; font-size: 0.8rem; }
  .float-card--track { left: 0; top: 340px; width: 220px; }
  .float-card--collab { right: -4%; top: 190px; width: 210px; }

  .about__grid { grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: start; }
  .about__head { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 20px; }

  .features__layout { grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: stretch; }
  .feature-stage { min-height: 560px; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; order: 0; }
  .feature-item__btn { padding: 22px 0; }

  .showcase__layout { grid-template-columns: 250px 1fr 340px; gap: 40px; align-items: center; }
  .tabs-v { flex-direction: column; overflow: visible; margin: 0; padding: 0 0 0 18px; gap: 4px; border-left: 1px solid var(--line-dark); }
  .tab-v { width: 100%; background: none; border: 0; border-radius: 10px; padding: 14px 14px; font-size: 1rem; }
  .tab-v[aria-selected="true"] { background: rgba(255, 255, 255, 0.06); color: var(--white); }
  .tab-v[aria-selected="true"] .tab-v__num { color: var(--amber); }
  .tab-v__bar { display: block; position: absolute; left: -19px; top: 0; width: 2px; height: 52px; border-radius: 2px; background: var(--amber); will-change: transform; }
  .tabs-v { position: relative; }
  .showcase__device .phone { --w: 310px; }
  .showcase__copy { min-height: 300px; }

  .how__layout { grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
  .how__intro { position: sticky; top: calc(var(--header-h) + 48px); }
  .how__counter { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
  .how__counter-num { font-size: 6rem; font-weight: 800; letter-spacing: -0.06em; line-height: 0.9; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; height: 0.9em; display: inline-block; }
  .how__counter-num span { display: block; }
  .how__counter-total { font-size: 1rem; color: var(--muted-2); font-weight: 700; }
  .how__counter-label { display: block; font-size: 0.95rem; color: var(--ink-2); font-weight: 650; margin-top: 4px; }
  .timeline { padding-left: 64px; }
  .timeline__track { left: 21px; }
  .step { padding-bottom: 28px; }
  .step__node { left: -64px; width: 44px; height: 44px; font-size: 0.85rem; }
  .step__card { padding: 28px; }

  .why__top { grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; }
  .ledger { grid-template-columns: repeat(3, 1fr); }
  .ledger__item, .ledger__item:nth-child(2n) { padding: 36px 32px; border-left: 1px solid var(--line); grid-template-columns: 1fr; gap: 22px; }
  .ledger__item:nth-child(3n + 1) { border-left: 0; padding-left: 4px; }

  .testi__layout { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }

  .faq__layout { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
  .faq__aside { position: sticky; top: calc(var(--header-h) + 32px); }

  .cta-panel { grid-template-columns: 1.15fr 0.85fr; padding: 80px 0 0 72px; gap: 24px; }
  .cta-panel__copy { padding-bottom: 80px; }
  .cta-panel__visual { height: auto; min-height: 460px; }
  .cta-panel__visual .phone { --w: 290px; margin-left: -145px; top: 40px; }

  .footer__top { grid-template-columns: 1fr 2fr; gap: 64px; }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }

  .page-hero__inner { gap: 26px; }
  .legal { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; }
  .toc { display: block; position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; }

  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .fdetail { grid-template-columns: 1fr 1fr; gap: 72px; }
  .fdetail--flip .fdetail__visual { order: -1; }
  .fdetail__visual { min-height: 440px; }
  .contact__layout { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
}

/* ---------- wide desktop ---------- */
@media (min-width: 1280px) {
  .hero__visual { height: 660px; }
  .hero__phone--main { --w: 300px; margin-left: -150px; }
  .hero__phone--left { --w: 232px; margin-left: -282px; top: 120px; }
  .hero__phone--right { --w: 232px; margin-left: 50px; top: 120px; }
  .float-card--chip { margin-left: -270px; font-size: 0.85rem; }
  .float-card--track { left: -2%; top: 380px; width: 244px; }
  .float-card--collab { right: -4%; top: 210px; width: 232px; }
  .showcase__layout { grid-template-columns: 280px 1fr 380px; }
}

@media (min-width: 1600px) {
  :root { --container: 1320px; }
  .hero__visual { height: 720px; }
  .hero__phone--main { --w: 330px; margin-left: -165px; }
  .hero__phone--left { --w: 256px; margin-left: -320px; }
  .hero__phone--right { --w: 256px; margin-left: 64px; }
}

/* hover-only enhancements */
@media (hover: none) {
  .ledger__item::before { display: none; }
}