/* Pagnow — mobile composition layer. Loads last; every rule is inside a
   max-width query so the desktop stylesheet is untouched. */

/* ---------- global safety: no horizontal scroll, real viewport units ---------- */
@media (max-width: 1000px) {
  html { overflow-x: clip; }
  body { max-width: 100%; overflow: visible; overscroll-behavior-y: none; }
  .container { width: calc(100% - 2 * var(--gutter, 20px)); margin-inline: auto; }
  img, svg, video, canvas { max-width: 100%; }
  * { min-width: 0; }
}

@media (max-width: 1000px) { :root { --gutter: 24px; } }
@media (max-width: 430px)  { :root { --gutter: 20px; } }
@media (max-width: 360px)  { :root { --gutter: 16px; } }

/* ---------- header + mobile menu ---------- */
@media (max-width: 1000px) {
  .header {
    height: auto;
    min-height: 64px;
    padding-top: env(safe-area-inset-top);
    padding-inline: 0;
    backdrop-filter: blur(18px);
  }
  .nav-inner { min-height: 64px; align-items: center; gap: 12px; }
  .brand { gap: 10px; flex: 0 0 auto; }
  .brand-symbol { --mark: 22px; }
  .brand-word { font-size: clamp(16px, 4.6vw, 19px); letter-spacing: -.02em; }
  .nav-actions { margin-left: auto; gap: 10px; align-items: center; }
  .nav-actions .login { display: none; }
  .nav-actions .button-small {
    display: inline-flex; align-items: center; min-height: 42px;
    padding: 0 14px; font-size: clamp(11px, 3.2vw, 13px); white-space: nowrap;
  }
  .menu-toggle { width: 44px; height: 44px; padding: 12px; flex: 0 0 44px; }

  .mobile-nav {
    top: 100%; padding: 14px var(--gutter) calc(22px + env(safe-area-inset-bottom));
    background: #07050df7; backdrop-filter: blur(22px);
    max-height: calc(100dvh - 64px); overflow-y: auto;
    transform-origin: top center;
    animation: nav-drop .26s cubic-bezier(.22,.9,.24,1) both;
  }
  .mobile-nav a {
    min-height: 52px; display: flex; align-items: center;
    font: 500 15px var(--display); letter-spacing: -.01em;
  }
  .mobile-nav a:last-child {
    margin-top: 14px; border-bottom: 0; justify-content: center;
    background: var(--mint); color: #0d0520; border-radius: 12px;
    min-height: 50px; font-weight: 600;
  }
  @keyframes nav-drop { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
  html:has(.mobile-nav:not([hidden])) { overflow: hidden; }
}

/* ---------- hero ---------- */
@media (max-width: 1000px) {
  .hero { padding-bottom: 0; }
  .hero-inner { padding-top: clamp(18px, 5vw, 34px); display: block; }
  .hero-copy { width: 100%; text-align: left; }
  .hero-signature { justify-content: flex-start; margin-bottom: 16px; }
  .hero-eyebrow { font-size: clamp(10px, 2.9vw, 12px); letter-spacing: .14em; }
  .hero h1 {
    font-size: clamp(34px, 11.2vw, 60px); line-height: .98; letter-spacing: -.045em;
    text-wrap: balance; margin-top: 12px;
  }
  .hero-support > p {
    font-size: clamp(14px, 3.9vw, 16px); line-height: 1.6;
    margin: 18px 0 0; margin-inline: 0;
    max-width: 34ch; text-wrap: pretty;
  }
  .hero-support .button-row { margin-top: 24px; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
  .hero-support .button {
    min-height: 52px; display: inline-flex; align-items: center;
    font-size: clamp(13px, 3.6vw, 15px); padding-inline: 22px;
  }
  .hero-visual {
    position: relative; inset: auto; width: calc(100% + 2 * var(--gutter));
    margin: clamp(6px, 3vw, 22px) calc(var(--gutter) * -1) 0;
    height: clamp(230px, 62vw, 380px); z-index: 0; pointer-events: none;
  }
  .ribbon-drift { width: 112%; left: -6%; top: -4%; rotate: var(--art-rotate, -7deg); }
  .hero-ribbon { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .hero-halo { width: 130vw; height: 130vw; top: 26%; }
  .hero-foot { margin-top: clamp(18px, 6vw, 40px); min-height: 56px; padding: 14px 0 calc(18px + env(safe-area-inset-bottom)); }
  .scroll-cue { width: 44px; height: 44px; display: grid; place-items: center; }
}

/* ---------- marquee ---------- */
@media (max-width: 1000px) {
  .capabilities-strip { padding-block: 14px; }
  .capabilities-strip span { font-size: clamp(11px, 3.1vw, 13px); }
  .marquee-group { gap: 18px; }
}

/* ---------- cinema chapters ---------- */
@media (max-width: 1000px) {
  .cinema-scene { padding-inline: 0; }
  .cinema-scene > .scene-copy, .cinema-scene { min-width: 0; }
  .scene-kicker { font-size: clamp(10px, 2.8vw, 12px); letter-spacing: .16em; }
  .cinema-scene h2 { font-size: clamp(28px, 8.6vw, 46px); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
  .cinema-scene p { font-size: clamp(14px, 3.8vw, 16px); line-height: 1.65; text-wrap: pretty; }
  .cinema-scene .button, .cinema-scene .glass-action { min-height: 50px; display: inline-flex; align-items: center; }
  .scene-actions { flex-wrap: wrap; gap: 12px; }

  .connect-orbit { width: min(78vw, 340px); align-self: center; }
  .connect-orbit span { width: 46px; height: 46px; }
  .connect-orbit span > img { width: 27px; height: 27px; }
  .connect-orbit span:nth-child(2) { width: 54px; height: 34px; }
  .connect-orbit span:nth-child(2) > img { width: 40px; }

  .transaction-path ol { flex-wrap: wrap; gap: 10px; }
  .transaction-path li { font-size: 11px; }
  .payment-toast, .balance-float { position: relative; inset: auto; margin: 14px 0 0; }

  .scale-stats { flex-direction: row; flex-wrap: wrap; gap: 18px 26px; justify-content: space-between; }
  .scale-stats > div { flex: 1 1 40%; text-align: center; }
  .scale-stats b { font-size: clamp(30px, 9vw, 48px); }
  .scale-stats span { font-size: 12px; }

  .liquid-flow { flex-wrap: wrap; gap: 10px; font-size: 10px; }
  .product-cloud { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-cloud span { padding: 15px; font-size: 11.5px; }

  .pagnow-dashboard { width: 100%; }
  .dash-grid { grid-template-columns: 1fr; gap: 12px; }
  .dash-balance strong { font-size: clamp(22px, 6.4vw, 30px); }
  .dash-list span { font-size: 11.5px; }
  .management-list > div { gap: 14px; }
  .performance-core { flex-wrap: wrap; gap: 12px; justify-content: center; text-align: center; }
  .ecosystem-tags { flex-wrap: wrap; gap: 9px; }
  .ecosystem-tags span { font-size: 10.5px; }
}

/* ---------- infrastructure board + pillars ---------- */
@media (max-width: 1000px) {
  .section-heading { gap: 22px; }
  .section-heading h2 { font-size: clamp(30px, 8.8vw, 46px); line-height: 1.06; letter-spacing: -.04em; }
  .section-heading > p { font-size: clamp(14px, 3.8vw, 16px); max-width: 40ch; }
  .eyebrow { font-size: clamp(10px, 2.8vw, 12px); }

  .network-board { padding-inline: 16px; border-radius: 20px; }
  .board-heading { flex-wrap: wrap; gap: 8px; font-size: 10px; }
  .network-scene { display: flex; flex-direction: column; gap: 18px; padding: 22px 0; min-height: 0; }
  .network-inputs, .network-outputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .network-core { width: min(46vw, 170px); height: min(46vw, 170px); margin-inline: auto; }
  .connection-space { display: none; }

  .pillar-grid { grid-template-columns: 1fr; gap: 26px; }
  .pillar { padding-bottom: 22px; }
  .pillar-art, .pillar-art img { width: 84px; height: 84px; }
  .pillar-fx { width: 84px; height: 84px; }
  .pillar h3 { font-size: 20px; margin-top: 14px; }
  .pillar p { font-size: 14px; line-height: 1.6; }
}

/* pillar FX scale with the smaller art */
@media (max-width: 1000px) {
  [data-fx=orq] .pillar-fx b { left: 38.5px; top: 38.5px; }
  [data-fx=orq] .pillar-fx b:nth-child(1) { --fx: -23px; --fy: -23px; }
  [data-fx=orq] .pillar-fx b:nth-child(2) { --fx: 23px; --fy: -23px; }
  [data-fx=orq] .pillar-fx b:nth-child(3) { --fx: -23px; --fy: 23px; }
  [data-fx=orq] .pillar-fx b:nth-child(4) { --fx: 23px; --fy: 23px; }
  [data-fx=liq] .pillar-fx b { left: 39px; top: 39px; }
  [data-fx=liq] .pillar-fx b:nth-child(1) { transform: rotate(0) translateY(-35px); }
  [data-fx=liq] .pillar-fx b:nth-child(2) { transform: rotate(90deg) translateY(-35px); }
  [data-fx=liq] .pillar-fx b:nth-child(3) { transform: rotate(180deg) translateY(-35px); }
  [data-fx=liq] .pillar-fx b:nth-child(4) { transform: rotate(270deg) translateY(-35px); }
  [data-fx=anti] .pillar-fx b:nth-child(1) { left: 12px; width: 60px; }
  [data-fx=comp] .pillar-fx b { left: 17px; width: 13px; height: 13px; }
  [data-fx=comp] .pillar-fx b:nth-child(1) { top: 24px; }
  [data-fx=comp] .pillar-fx b:nth-child(2) { top: 40px; }
  [data-fx=comp] .pillar-fx b:nth-child(3) { top: 56px; }
}

/* ---------- products carousel ---------- */
@media (max-width: 1000px) {
  .product-carousel, .products { overflow: visible; }
  .carousel-arrow { width: 44px; height: 44px; }
  .product-grid { gap: 14px; }
  .product { border-radius: 20px; padding: 22px; }
  .product:not(.product-feature):not(.product-white-label) { min-height: 0; }
  .product-top { margin-bottom: 20px; font-size: 10.5px; }
  .product h3 { font-size: clamp(21px, 6.2vw, 27px); line-height: 1.12; }
  .product p { font-size: 14px; line-height: 1.6; }

  .product-feature { grid-template-columns: 1fr; gap: 20px; }
  .product-feature h3 { font-size: clamp(28px, 9vw, 42px); line-height: 1.06; }
  .feature-copy { max-width: none; }
  .feature-copy > p { font-size: 14px; line-height: 1.7; }
  .feature-visual { min-width: 0; }

  .pix-steps { flex-wrap: wrap; gap: 8px; font-size: 10.5px; }
  .payout-scene { grid-template-columns: 72px minmax(16px, 1fr) minmax(0, 1.15fr); min-height: 180px; }
  .payout-origin { width: 72px; height: 72px; }
  .payout-targets > span { padding: 11px; font-size: 11.5px; gap: 6px; }

  .product-copy-only > h3 { white-space: normal; font-size: clamp(22px, 6.6vw, 28px); }
  .product-copy-only > p { font-size: 14px; max-width: 32ch; }

  .chain-scene { grid-template-columns: 40px minmax(0, 1fr) 40px; height: 128px; }
  .chain-scene > .chain-asset { width: 88px; height: 88px; }
  .chain-scene > .chain-asset > img { width: 84px !important; height: 84px !important; }

  .swap-scene { gap: 10px; justify-content: space-between; }
  .swap-scene > span { font-size: 15px; padding: 8px; }
  .swap-scene > i { font-size: 18px; }
  .swap-scene > span.stable-pair > img { width: 84px !important; height: 84px !important; }
  .brl-origin img { width: 48px !important; height: 48px !important; }

  .split-scene { grid-template-columns: 72px minmax(14px, 1fr) max-content; min-height: 160px; }
  .split-origin { width: 72px; height: 72px; }
  .split-recipients > span { font-size: 11.5px; padding: 0 11px; min-height: 30px; }

  .settle-scene { gap: 16px; min-height: 130px; }
  .settle-origin { width: 76px; height: 76px; }
  .settle-scene > b.settle-pair > img { width: 78px; height: 78px; }
  .settle-pair > span { font-size: 11px; }

  .product-white-label { padding: 24px; }
  .brand-platform-art { width: 100%; }
}

/* ---------- payment coverage ---------- */
@media (max-width: 1000px) {
  .payment-heading { display: grid; gap: 18px; }
  .payment-heading-copy { display: grid; gap: 14px; }
  .currency-orbit { justify-content: flex-start; flex-wrap: wrap; gap: 8px; font-size: 12px; }
  .region-tabs {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .region-tabs::-webkit-scrollbar { display: none; }
  .region-tab { flex: 0 0 auto; scroll-snap-align: start; min-height: 52px; font-size: 13px; }
  .region-tab small { font-size: 10.5px; }
  .region-grid, .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .region { grid-template-columns: 28px minmax(0, 1fr) 40px; gap: 10px; }
  .region-art { width: 40px; height: 54px; }
  .region-art > img { width: 40px; height: 54px; }
  .method-card, .method-tile { padding: 14px; }
  .method-card img, .method-tile img { max-height: 26px; width: auto; object-fit: contain; }
}

/* ---------- journey / api / film ---------- */
@media (max-width: 1000px) {
  .journey-stage { height: auto; }
  .journey-sticky { position: static; top: auto; }
  .journey-ruler { flex-wrap: wrap; gap: 8px; font-size: 10px; }
  .journey-track ol { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .journey-track li { padding: 18px; }
  .journey-track h3 { font-size: 19px; }
  .journey-track p { font-size: 13.5px; }

  .api-layout { grid-template-columns: 1fr; gap: 26px; }
  .api-copy h2 { font-size: clamp(30px, 8.8vw, 44px); }
  .api-terminal { transform: none; border-radius: 18px; }
  .api-terminal pre { font-size: 11.5px; line-height: 1.7; overflow-x: auto; }
  .code-line { white-space: pre; }
  .terminal-bottom { flex-wrap: wrap; gap: 8px; font-size: 10px; }
  .api-copy .button { min-height: 52px; display: inline-flex; align-items: center; }

  .film-window { min-height: clamp(360px, 92vw, 560px); clip-path: inset(0 var(--film-inset, 0px) round 18px); }
  .film-window > img { object-fit: cover; object-position: 62% center; }
  .film-copy { padding-block: clamp(48px, 14vw, 80px); }
  .film-copy h2 { font-size: clamp(28px, 8.6vw, 44px); }
}

/* ---------- why / closing / contact / footer ---------- */
@media (max-width: 1000px) {
  .why-section { border-radius: 22px 22px 0 0; }
  .why-grid { grid-template-columns: 1fr; gap: 0; }
  .why-item { padding: 22px 0; gap: 14px; }
  .why-item h3 { font-size: 20px; }
  .why-item p { font-size: 14px; line-height: 1.6; }

  .closing { min-height: 0; padding-top: clamp(70px, 18vw, 120px); }
  .closing h2 { font-size: clamp(38px, 12.5vw, 78px); line-height: 1.02; }
  .closing-inner > p:not(.eyebrow) { font-size: 14px; }
  .closing .button-row { flex-wrap: wrap; gap: 14px; }
  .closing .button, .closing .text-link { min-height: 52px; display: inline-flex; align-items: center; }
  .closing-word { font-size: 20vw; }

  .contact-live-shell { grid-template-columns: 1fr; gap: 22px; padding: 24px; border-radius: 20px; }
  .contact-live h2 { font-size: clamp(26px, 8vw, 38px); }
  .contact-channels { display: grid; gap: 10px; }
  .contact-channels a { min-height: 52px; display: flex; align-items: center; font-size: 14px; }

  .footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .footer-top { grid-template-columns: 1fr; gap: 26px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .footer a { min-height: 40px; display: inline-flex; align-items: center; }
  .footer-bottom { flex-wrap: wrap; gap: 10px; font-size: 11px; }
}

/* ---------- tablet portrait / landscape ---------- */
@media (min-width: 701px) and (max-width: 1000px) {
  .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .region-grid, .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-cloud { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .journey-track ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) and (orientation: landscape) {
  .hero-visual { height: clamp(190px, 34vw, 300px); }
  .hero h1 { font-size: clamp(30px, 6.4vw, 52px); }
}

/* ---------- 320px hardening ---------- */
@media (max-width: 360px) {
  .nav-actions .button-small span { display: none; }
  .hero h1 { font-size: clamp(29px, 10.6vw, 38px); }
  .scale-stats > div { flex: 1 1 100%; }
  .product-cloud { grid-template-columns: 1fr; }
  .region-grid, .method-grid, .footer-nav { grid-template-columns: 1fr; }
  .payout-scene { grid-template-columns: 62px minmax(10px, 1fr) minmax(0, 1fr); }
  .payout-origin, .split-origin { width: 62px; height: 62px; }
  .swap-scene > span.stable-pair > img { width: 68px !important; height: 68px !important; }
  .closing-word { font-size: 24vw; }
}

/* ---------- touch + motion behaviour ---------- */
@media (hover: none) {
  /* hover-only reveals become always-on so nothing is unreachable by touch */
  .pillar .pillar-art img { animation-play-state: running; }
  .why-item::after { transform: scaleX(1); }
  a, button { -webkit-tap-highlight-color: transparent; }
}
@media (max-width: 1000px) {
  /* lighter motion: same effects, shorter travel, GPU-friendly properties */
  .reveal { --reveal-y: 18px; }
  .hero-ribbon, .product-art > img, .pillar-art img, .brand-platform-art > img { will-change: transform; }
  .cinema-backdrop video { display: none; }
  @keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { animation: none !important; }
}

/* ---------- second pass: widgets with desktop-fixed geometry ---------- */
@media (max-width: 1000px) {
  /* PIX feature scene */
  .pix-scene { flex-wrap: wrap; justify-content: center; align-content: center; gap: 16px; min-height: 0; margin: 24px 0 16px; }
  .pix-scan { width: min(34vw, 118px); height: min(34vw, 118px); }
  .pix-steps { flex: 1 1 100%; min-width: 0; gap: 10px; }

  /* infra bridges */
  .network-bridges { height: auto; min-height: 180px; }

  /* country cards / panels */
  .country-panel { max-width: 100%; }
  .country-card { min-height: 0; padding: 18px; }
  .country-card::after { width: 88px; height: 88px; right: -44px; top: -44px; }
  .country-card h3 { font-size: 17px; }
  .method-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .method-badge-logo img { height: 20px; max-width: 88px; }
  .payment-note { font-size: 11.5px; line-height: 1.6; }

  /* live phone in the contact section */
  .live-phone { width: min(100%, 340px); height: auto; aspect-ratio: 9 / 15.5; justify-self: center; padding: 14px; border-radius: 28px; }
  .live-screen { height: auto; aspect-ratio: 9 / 13; padding: 14px 2px; }
  .live-notification { grid-template-columns: 42px 1fr 20px; gap: 11px; font-size: 12px; }
  .live-phone-home { width: 88px; }

  /* footer + misc */
  .footer-contact > a { max-width: 100%; font-size: 14px; word-break: break-word; }
  .footer-brand-copy, .footer p { font-size: 13px; line-height: 1.7; }

  /* carousel affordances */
  .carousel-dots { display: flex; justify-content: center; gap: 8px; }
  .carousel-dots button { width: 26px; height: 26px; }
  .product-grid-single { grid-template-columns: 1fr; }

  /* long numeric + currency strings never break mid-value */
  .dash-balance strong, .balance-float strong, .payment-toast strong,
  .scale-stats b, .live-notification strong { white-space: nowrap; }
}

/* centre the pieces that read better centred on a phone */
@media (max-width: 560px) {
  .scale-stats { justify-content: center; text-align: center; }
  .performance-core { text-align: center; }
  .performance-core span { flex: 1 1 100%; }
  .liquid-flow { justify-content: center; }
  .currency-orbit { justify-content: center; }
  .product-copy-only { text-align: center; }
  .closing-inner { text-align: center; }
  .closing .button-row { justify-content: center; }
  .contact-live-copy { text-align: center; }
  .contact-channels a { justify-content: center; }
  .ecosystem-tags { justify-content: center; }
  .section-heading { text-align: left; }
}

/* motion: keep every effect, shorten travel, skip offscreen work */
@media (max-width: 1000px) {
  .cinema-scene { contain: layout style; }
  .connection-pulse { animation-duration: 3.2s; }
  .scale-wave i { animation-duration: 2.6s; }
  .live-notification { animation-duration: 9s; }
  .closing-orbits i { opacity: .5; }
}

/* feature cards must truly stack: children were pinned to column 2 */
@media (max-width: 1000px) {
  .product-feature { grid-template-columns: minmax(0, 1fr); }
  .product-feature > .product-top,
  .product-feature > .feature-copy,
  .product-feature > .feature-visual,
  .product-feature > .product-foot { grid-column: 1 / -1; min-width: 0; }
  .pix-scene, .payout-scene { width: 100%; }
}

/* cinema chapters flow as blocks below 1000px — the sticky stage clipped tall scenes */
@media (max-width: 1000px) {
  .cinema-story { height: auto; }
  .cinema-stage { position: relative; top: auto; height: auto; overflow: visible; }
  .cinema-scenes { position: relative; inset: auto; }
  .cinema-scene {
    position: relative; inset: auto; min-height: 0;
    padding: clamp(64px, 16vw, 96px) 0 clamp(48px, 12vw, 72px);
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    gap: 22px; opacity: 1; visibility: visible; filter: none; transform: none;
    border-bottom: 1px solid #645f812e;
  }
  .cinema-scene:last-child { border-bottom: 0; }
  .cinema-scenes > .cinema-scene { padding-inline: var(--gutter); }
  .cinema-index, .cinema-progress { display: none; }
  .cinema-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .cinema-story { position: relative; isolation: isolate; }
  .cinema-scenes, .cinema-scene { position: relative; z-index: 1; }
}

/* ---------- opening sequence: a phone-native "liquidity rise" ---------- */
@media (max-width: 1000px) {
  .brand-intro { padding-inline: var(--gutter); }
  /* curtains split along the phone's long axis */
  .intro-curtain { width: 100%; height: 50.1%; left: 0; right: 0; }
  .curtain-left { top: 0; bottom: auto; }
  .curtain-right { top: auto; bottom: 0; }

  .intro-mark { top: 44%; gap: clamp(14px, 4.4vw, 22px); perspective: 700px; flex-wrap: nowrap; }
  .intro-mark .brand-symbol { --mark: clamp(58px, 17vw, 82px); filter: drop-shadow(0 0 26px #8b5cf655); }
  .intro-word { font-size: clamp(31px, 10.8vw, 48px); letter-spacing: .04em; }
  .intro-caption { left: var(--gutter); right: var(--gutter); text-align: center; font-size: clamp(10px, 3vw, 12px); letter-spacing: .26em; }
  .intro-edition { left: var(--gutter); right: var(--gutter); text-align: center; font-size: clamp(9px, 2.6vw, 10.5px); letter-spacing: .2em; }

  /* liquidity column rising from the bottom of the screen */
  .intro-streak { width: 1px; height: 46dvh; transform-origin: 50% 100%; }
  .intro-orbits i { width: 64vw; height: 64vw; }
  .intro-orbits i:nth-child(2) { width: 88vw; height: 88vw; }
  .intro-orbits i:nth-child(3) { width: 116vw; height: 116vw; }
  .intro-glow { width: 132vw; height: 132vw; }
  .intro-crosshair i { opacity: .45; }

  .intro-skip {
    left: 50%; right: auto; translate: -50% 0;
    bottom: calc(20px + env(safe-area-inset-bottom));
    min-height: 44px; display: inline-flex; align-items: center;
    padding-inline: 18px; font-size: 12px;
  }
  .hero[data-opening=true] .hero-visual,
  .hero[data-opening=true] .hero-line > span { will-change: transform, opacity; }
}
@media (max-width: 360px) {
  .intro-mark .brand-symbol { --mark: 52px; }
  .intro-word { font-size: 29px; letter-spacing: .02em; }
}

/* ================= MOBILE HERO — its own composition =================
   The ribbon sits inside a lit aperture; under it a live status window and the
   currency rails. Portrait-only: desktop never sees these nodes. */
@media (max-width: 1000px) {
  .hero-inner { position: relative; }

  /* aperture framing the sculpture */
  .hero-aperture {
    display: block; position: absolute; left: 50%; top: 50%;
    width: min(88vw, 400px); aspect-ratio: 1; translate: -50% -50%;
    pointer-events: none; z-index: 0;
  }
  .hero-aperture > i {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid #7a6bc62e;
  }
  .hero-aperture > i:nth-child(2) {
    inset: 13%; border-color: #8b5cf62b;
    box-shadow: inset 0 0 60px #8b5cf611;
  }
  .hero-aperture > u {
    position: absolute; inset: 0; display: block;
    animation: aperture-spin 14s linear infinite;
  }
  .hero-aperture > u > b {
    position: absolute; left: 50%; top: -3px; width: 6px; height: 6px;
    margin-left: -3px; border-radius: 50%; background: #bd9dff;
    box-shadow: 0 0 12px 4px #8b5cf68c;
  }
  @keyframes aperture-spin { to { transform: rotate(360deg); } }

  .hero-visual { z-index: 1; height: clamp(250px, 66vw, 400px); }
  .ribbon-drift { width: 104%; left: -2%; top: 0; }

  /* live status window + currency rails */
  .hero-live {
    display: grid; gap: 12px; margin-top: clamp(16px, 5vw, 26px);
    position: relative; z-index: 2;
  }
  .hl-window {
    height: 46px; overflow: hidden; border-radius: 12px;
    border: 1px solid #7a6bc62e; background: #090712e0;
    box-shadow: inset 0 0 34px #8b5cf60f;
  }
  .hl-track { animation: hl-roll 9s cubic-bezier(.7,0,.2,1) infinite; }
  .hl-track > span {
    display: flex; align-items: center; gap: 10px; height: 46px; padding-inline: 16px;
    font: 600 12.5px var(--display); letter-spacing: .1em; color: #e4dff6;
  }
  .hl-track > span > i {
    width: 7px; height: 7px; border-radius: 50%; background: #8b5cf6;
    box-shadow: 0 0 10px 3px #8b5cf666; animation: hl-blink 1.6s ease-in-out infinite;
  }
  @keyframes hl-roll {
    0%,26%   { transform: translateY(0); }
    33%,59%  { transform: translateY(-46px); }
    66%,92%  { transform: translateY(-92px); }
    100%     { transform: translateY(-138px); }
  }
  @keyframes hl-blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

  .hl-rails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hl-rails > span {
    position: relative; overflow: hidden; text-align: center;
    padding: 11px 0; border-radius: 10px; border: 1px solid #7a6bc62e;
    background: #090712c4; font: 600 11px var(--display);
    letter-spacing: .14em; color: #c8bfe6;
  }
  .hl-rails > span::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, #8b5cf633 50%, transparent 80%);
    translate: -100% 0; animation: rail-sweep 3.6s ease-in-out infinite;
  }
  .hl-rails > span:nth-child(2)::after { animation-delay: .5s; }
  .hl-rails > span:nth-child(3)::after { animation-delay: 1s; }
  @keyframes rail-sweep { 0% { translate: -100% 0; } 55%,100% { translate: 100% 0; } }

  .hero-foot { margin-top: clamp(20px, 6vw, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aperture > u, .hl-track, .hl-rails > span::after, .hl-track > span > i { animation: none !important; }
}

/* ---------- audit fixes: fit-to-gutter widgets + real touch targets ---------- */
@media (max-width: 1000px) {
  /* the rails orbit was 6-27px wider than the column at 360-390px */
  .connect-orbit { width: min(70vw, 300px); max-width: calc(100% - 6px); margin-inline: auto; }


  /* carousel dots: 26px dot, 44px touch */
  [data-carousel] .carousel-dots button, .carousel-dots button { position: relative; }
  [data-carousel] .carousel-dots button::after, .carousel-dots button::after { content: ''; position: absolute; inset: -9px; }

  /* brand link reaches the 44px minimum */
  .brand { min-height: 44px; }
}

/* aperture must sit INSIDE the visual frame — it was 43px taller and grazing the live ticker */
@media (max-width: 1000px) {
  .hero-visual { height: clamp(258px, 72vw, 400px); }
  .hero-aperture { width: min(66vw, 280px); max-height: 100%; }
  .hero-live { margin-top: clamp(14px, 4vw, 22px); }
}

/* ================= MOBILE FIRST SCREEN — always animated, always full =================
   Runs from CSS so the opening never depends on JS timing; entrance.js, when it does
   run, simply takes over with the same choreography. */
@media (max-width: 1000px) {
  /* tighter vertical rhythm so sculpture + live panel reach the first screen */
  .hero h1 { font-size: clamp(32px, 10.2vw, 52px); }
  .hero-support > p { margin-top: 14px; }
  .hero-support .button-row { margin-top: 20px; }
  .hero-visual { height: clamp(212px, 56vw, 320px); margin-top: clamp(4px, 2vw, 14px); }
  .hero-aperture { width: min(58vw, 236px); }
  .hero-live { margin-top: 12px; }

  html[data-motion=on][data-ambient=running] .hero-signature,
  html[data-motion=on][data-ambient=running] .hero-eyebrow,
  html[data-motion=on][data-ambient=running] .hero h1,
  html[data-motion=on][data-ambient=running] .hero-support > p,
  html[data-motion=on][data-ambient=running] .hero-support .button-row > *,
  html[data-motion=on][data-ambient=running] .hero-visual,
  html[data-motion=on][data-ambient=running] .hl-window,
  html[data-motion=on][data-ambient=running] .hl-rails > span,
  html[data-motion=on][data-ambient=running] .hero-foot {
    animation: hero-rise .95s cubic-bezier(.16,1,.3,1) both;
  }
  html[data-motion=on][data-ambient=running] .hero-signature { animation-delay: .06s; }
  html[data-motion=on][data-ambient=running] .hero-eyebrow { animation-delay: .16s; }
  html[data-motion=on][data-ambient=running] .hero h1 { animation-delay: .26s; }
  html[data-motion=on][data-ambient=running] .hero-support > p { animation-delay: .46s; }
  html[data-motion=on][data-ambient=running] .hero-support .button-row > *:nth-child(1) { animation-delay: .6s; }
  html[data-motion=on][data-ambient=running] .hero-support .button-row > *:nth-child(2) { animation-delay: .7s; }
  html[data-motion=on][data-ambient=running] .hero-visual { animation: hero-bloom 1.25s cubic-bezier(.16,1,.3,1) .5s both; }
  html[data-motion=on][data-ambient=running] .hl-window { animation-delay: .86s; }
  html[data-motion=on][data-ambient=running] .hl-rails > span:nth-child(1) { animation-delay: .96s; }
  html[data-motion=on][data-ambient=running] .hl-rails > span:nth-child(2) { animation-delay: 1.04s; }
  html[data-motion=on][data-ambient=running] .hl-rails > span:nth-child(3) { animation-delay: 1.12s; }
  html[data-motion=on][data-ambient=running] .hero-foot { animation-delay: 1.2s; }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(24px); filter: blur(7px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  @keyframes hero-bloom {
    0%   { opacity: 0; transform: translateY(54px) scale(.9); filter: blur(10px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
  }

  /* the halo breathes so the top of the page is never static */
  html[data-motion=on][data-ambient=running] .hero-halo { animation: halo-breathe 9s ease-in-out infinite; }
  @keyframes halo-breathe { 0%,100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.035; } }
}

/* ---------- real 44px touch targets ---------- */
@media (max-width: 1000px) {
  /* flags: same premium pill, 40px targets */
  .flag-group { gap: 2px; padding: 2px; }
  .flag-btn { width: 40px; height: 40px; }
  .flag-btn::before { width: 22px; height: 22px; }

  .carousel-dots { gap: 0; }
  .carousel-dots button {
    width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0;
    background: none; border-radius: 50%; display: grid; place-items: center;
  }
  .carousel-dots button::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: #7a6bc659; transition: background .2s, box-shadow .2s, scale .2s;
  }
  .carousel-dots button::after { display: none; }
  .carousel-dots button.is-active::before { background: #8b5cf6; box-shadow: 0 0 10px 3px #8b5cf64d; scale: 1.15; }

  .carousel-arrow { width: 46px; height: 46px; }
  .region-tab, .country-tab { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion=on][data-ambient=running] .hero-signature, html[data-motion=on][data-ambient=running] .hero-eyebrow,
  html[data-motion=on][data-ambient=running] .hero h1, html[data-motion=on][data-ambient=running] .hero-support > p,
  html[data-motion=on][data-ambient=running] .hero-support .button-row > *, html[data-motion=on][data-ambient=running] .hero-visual,
  html[data-motion=on][data-ambient=running] .hl-window, html[data-motion=on][data-ambient=running] .hl-rails > span,
  html[data-motion=on][data-ambient=running] .hero-foot, html[data-motion=on][data-ambient=running] .hero-halo { animation: none !important; }
}

/* remaining sub-44px controls */
@media (max-width: 1000px) {
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .terminal-top button, .copy-button { min-height: 40px; padding-inline: 14px; }
}
@media (max-width: 360px) {
  /* the header CTA must keep a readable label and a 44px target */
  .nav-actions .button-small span { display: inline; }
  .nav-actions .button-small { min-width: 96px; min-height: 44px; padding-inline: 12px; font-size: 11px; }
}

/* no curtain layer on phones — the hero cascade IS the opening */
@media (max-width: 1000px) {
  .brand-intro, .intro-skip { display: none !important; }
}

/* the opening and the live panel are content, not ambience — never freeze them */
@media (max-width: 1000px) {
  html[data-ambient="paused"] .hero *,
  html[data-ambient="paused"] .hero *::before,
  html[data-ambient="paused"] .hero *::after { animation-play-state: running !important; }
}

/* ================= MOBILE HERO = DESKTOP COMPOSITION =================
   Centered lockup: signature, eyebrow, headline, lead, single CTA, then the
   infinity ribbon large and centered underneath. */
@media (max-width: 1000px) {
  .hero-inner { display: flex; flex-direction: column; align-items: center; }
  .hero-copy { text-align: center; width: 100%; }
  .hero-signature { justify-content: center; }
  .hero h1 { text-align: center; margin-inline: auto; font-size: clamp(40px, 13.5vw, 72px); letter-spacing: -.05em; }
  .hero-support { display: flex; flex-direction: column; align-items: center; }
  .hero-support > p { margin: 18px auto 0; text-align: center; max-width: 30ch; }
  .hero-support .button-row { justify-content: center; margin-top: 26px; }

  /* the ribbon is the hero image again — big, centered, uncropped */
  .hero-aperture, .hero-live { display: none !important; }
  .hero-visual {
    width: calc(100% + 2 * var(--gutter));
    margin: clamp(10px, 4vw, 26px) calc(var(--gutter) * -1) 0;
    height: auto; aspect-ratio: 1 / .78; display: grid; place-items: center;
  }
  .ribbon-drift { position: relative; inset: auto; width: 100%; height: 100%; left: auto; top: auto; rotate: 0deg; }
  .hero-ribbon { width: 100%; height: 100%; object-fit: contain; object-position: center; }

  html[data-motion=on][data-ambient=running] .hero h1 { animation-delay: .22s; }
  html[data-motion=on][data-ambient=running] .hero-visual { animation: hero-bloom 1.35s cubic-bezier(.16,1,.3,1) .42s both; }
  html[data-motion=on][data-ambient=running] .hero-foot { animation-delay: .95s; }
}