/* ==========================================================================
   Responsive — breakpoints: 1920 1440 1280 1024 768 430 390 375 320
   Desktop-first refinements that follow the Figma layout intent.
   ========================================================================== */

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

/* 1280 and below — tighten gutters */
@media (max-width: 1280px) {
  :root { --gutter: 2rem; }
}

/* 1024 — tablets / small laptops */
@media (max-width: 1024px) {
  /* Logo no longer squashes to make room (see .navbar .logo flex-shrink:0),
     so tighten the navbar's own gaps to keep the full pill on one line. */
  .navbar__inner { gap: 1rem; }
  .navbar__nav { gap: 1.25rem; padding-left: 1rem; }
  .navbar__links { gap: 1rem; }
  .software__row { grid-template-columns: 1fr; }

  /* Legal pages: stack the table of contents above the body */
  .legal__layout { grid-template-columns: 1fr; gap: 2rem; }
  .legal__toc { position: static; padding: 1.25rem 1.5rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg-navy); }
  .legal__toc-list { border-left: 0; }
  .legal__toc-list a { padding-left: 0; border-left: 0; }
  /* On stacked layouts the desktop laptop-overlap tricks would overflow; reset to a clean stack. */
  .software__device { text-align: center; }
  .software__laptop { width: 100%; margin-left: 0; margin-bottom: 1.25rem; }
  .software__card { position: static; display: inline-block; width: 31%; margin: .35rem .4%; top: auto; left: auto; right: auto;
    box-shadow: 0 12px 28px rgba(2, 6, 18, .5); }
  .audience__grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .steps__inner { grid-template-columns: 1fr; }
  .steps__intro { position: static; }
  .an-features__grid { grid-template-columns: 1fr 1fr; }
  .an-features__grid .an-feature:last-child { grid-column: 1 / -1; max-width: 50%; }
}

/* 768 — mobile nav */
@media (max-width: 768px) {
  :root { --gutter: 1.25rem; --section-y: 4rem; }

  .navbar__toggle { display: flex; position: relative; z-index: 3; }
  /* Restore the single floating top-bar pill (the desktop pill is split across the
     logo + nav halves, which are flattened back to plain elements on mobile). */
  .navbar__inner {
    justify-content: space-between; align-items: center; gap: 1rem;
    background: var(--c-nav-pill);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--r-pill);
    padding: .55rem .6rem .55rem 1.6rem;
    box-shadow: var(--shadow-nav);
    filter: none;
  }
  .navbar .logo, .navbar__nav {
    background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0;
  }
  .navbar__nav { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
  /* Mobile drawer = full-viewport overlay (collapse wraps nav links + CTAs). The
     top band (--pill-zone) stays transparent so the white floating pill — with its
     dark logo + close icon — remains visible; the body below is solid navy. Page
     scroll is locked via body.nav-open and the drawer scrolls internally only. */
  .navbar__collapse {
    --pill-zone: calc(6.25rem + env(safe-area-inset-top));
    display: flex; position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch;
    background: linear-gradient(to bottom, transparent var(--pill-zone), var(--c-bg-navy) var(--pill-zone));
    border-radius: 0;
    padding: calc(var(--pill-zone) + 1rem) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
    gap: var(--space-3);
    transform: translateY(-100%); transition: transform var(--t-slow) var(--ease); box-shadow: var(--shadow-nav-mobile);
    height: 100vh; height: 100dvh; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .navbar.is-open .navbar__collapse { transform: translateY(0); }
  body.nav-open { overflow: hidden; }
  .navbar__links { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .navbar__link { color: var(--c-text); padding: var(--space-3) 0; font-size: 1.1rem; }
  .navbar__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(255,255,255,.04); border: 0; max-height: 0; overflow: hidden; padding: 0 var(--space-2); transition: max-height var(--t) var(--ease); }
  .navbar__menu a { color: var(--c-text-muted); }
  .navbar__dropdown.is-open .navbar__menu { max-height: 320px; padding: var(--space-2); }
  .navbar__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); margin-left: 0; align-self: stretch; }
  .navbar__lang { width: 100%; margin-left: 0; }
  /* Language trigger row shares the same vertical rhythm as the nav links. */
  .navbar__langbtn { color: var(--c-text); justify-content: space-between; width: 100%; padding: var(--space-3) 0; }
  /* Language list: one language per row, full-width touch rows, native names. */
  .navbar__menu--lang { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
  .navbar__menu--lang a { display: flex; align-items: center; justify-content: flex-start; text-align: left; width: 100%; min-height: 48px; padding: .7rem 1rem; border-radius: var(--r-sm); font-size: 1.05rem; color: var(--c-text); }
  .navbar__menu--lang a.is-active { background: var(--c-overlay-sky-btn); color: var(--c-sky); font-weight: var(--fw-semibold); }
  /* Show full native name on mobile; hide the short code used on desktop. */
  .navbar__menu--lang .navbar__lang-short { display: none; }
  .navbar__menu--lang .navbar__lang-full { display: inline; }
  /* All 9 rows must be visible once expanded (drawer itself scrolls if needed). */
  .navbar__lang.is-open .navbar__menu--lang { max-height: 640px; }
  .navbar__cta-secondary, .navbar__cta-primary { width: 100%; text-align: center; }
  .navbar.is-open .navbar__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar.is-open .navbar__toggle span:nth-child(2) { opacity: 0; }
  .navbar.is-open .navbar__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card__watermark { left: 0; }

  .connection__inner { min-height: 0; }
  .connection__inner > .eyebrow { position: static; transform: none; margin-bottom: 1rem; }
  .connection__nodes { position: relative; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; inset: auto; margin-bottom: 2rem; }
  .conn-node, .conn-node.n0, .conn-node.n1, .conn-node.n2 { position: static !important; transform: none !important; animation: none !important; width: 84px !important; height: 84px !important; font-size: .72rem; }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }

  .timeline::before { left: 19px; }
  .process-card { grid-template-columns: 40px 1fr; gap: 1rem; }
  .process-card__node { width: 40px; height: 40px; font-size: .8rem; }
  .process-card__body { padding: 1.25rem; }

  .partners__network { width: 100%; }

  .built-for__item { letter-spacing: .06em; font-size: clamp(.8rem, 3.4vw, 1.3rem); }

  .about-block__grid, .roadmap__head, .roadmap__grid, .values__grid,
  .contact-page__grid, .hero-platform__row, .an-api__grid, .an-features__grid { grid-template-columns: 1fr; }

  /* Roadmap stacks: drop the cascading offsets + header description offset */
  .roadmap-item { margin-top: 0 !important; }
  .roadmap__head .lead { margin-top: 0; }

  /* How BiTo Works: stack boxes, hide SVG elbow connectors */
  .how-flow { aspect-ratio: auto; display: flex; flex-direction: column; gap: 1rem; max-width: 520px; }
  .how-flow__lines { display: none; }
  .how-box { position: static !important; width: 100% !important; }

  /* Platform flow: keep centered line, stack cards single-column */
  .pf-card { grid-template-columns: 44px 1fr; gap: 1rem; padding: 1.5rem 1.4rem; }
  .pf-card__icon { width: 44px; height: 44px; }
  .hero-platform__title-accent::after { display: none; }

  /* Constrain large display headings so they wrap inside the mobile viewport */
  .hero-platform__title, .an-hero__title, .an-features__title { font-size: clamp(1.9rem, 7.5vw, 2.6rem); overflow-wrap: break-word; }
  .hero-platform__row { align-items: flex-start; }

  /* Hero headlines: prevent long translated words (DE) or CJK strings from
     overflowing the viewport — break only as a last resort, no forced hyphens. */
  .hero__title, .hero__title-1, .hero__title-2, .gateway__title { overflow-wrap: break-word; }

  /* Trading Engine underlined headline: when it wraps on mobile the underline of
     one line could collide with the glyphs of the line below (worst on CJK).
     Open up the line spacing and push the underline clear of its own glyphs so it
     never visually crosses text — all languages. Highlight treatment unchanged. */
  .page-trading-engine .hero-platform__title { line-height: 1.35; }
  .page-trading-engine .hero-platform__title-1,
  .page-trading-engine .hero-platform__title-accent { text-underline-offset: .22em; }

  /* Analytics feature cards: the Partner Program card is the grid's last child and
     carries a desktop max-width:50% cap (set at <=1024). Reset it so it spans the
     full single column on phones instead of rendering as a narrow half-width card. */
  .an-features__grid .an-feature:last-child { max-width: none; grid-column: auto; }

  /* Language Gateway: two-up cards, lighter watermark */
  .gateway__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gateway__wm { font-size: clamp(9rem, 46vw, 18rem); }
}

/* 430 / 390 / 375 — phones */
@media (max-width: 430px) {
  .hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .footer__cols { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero__actions, .hero__actions .btn { width: 100%; }

  /* Language Gateway: single column stack on phones */
  .gateway__grid { grid-template-columns: 1fr; gap: .7rem; }
  .gateway__card { padding: .95rem 1.1rem; }
  .gateway__trust { gap: .5rem 1.3rem; }

  /* Key Features — phone layout: decorative word sits fully visible ABOVE the
     icon (no clipping, no icon overlap, consistent across cards) + denser rhythm. */
  .feature-grid { gap: 1.4rem; }
  .feature-card { padding-top: 2.3rem; }
  .feature-card__watermark {
    top: .15rem; left: 0; right: auto;
    font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1;
  }
  .feature-card__icon { width: 46px; height: 46px; margin-bottom: .8rem; }
  .feature-card__title { margin-bottom: .55rem; }
  .feature-card__desc { margin-bottom: .9rem; }
  /* Larger, easier tap target; keep underline tight to the text. */
  .feature-card .link-more {
    padding: .6rem 0; font-size: 1rem;
    border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  }
}

/* 320 — smallest supported */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .stats { grid-template-columns: 1fr; }
}