/* ─────────────────────────────────────────────────────────────────
   Adverge Studio — global polish layer
   Applied AFTER each page's inline <style> so it can override
   responsive edge cases and add accessibility primitives.
   ───────────────────────────────────────────────────────────────── */

/* ───────── Base hardening ───────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 90px;
  /* Bulletproof horizontal-scroll lock: clip on html AND body, plus a
     hard width ceiling. iOS Safari sometimes ignores overflow-x: hidden
     when blurred orbs / absolutely-positioned elements bleed past the
     viewport — `overflow-x: clip` plus a max-width:100vw is the modern
     reliable cure. */
  overflow-x: clip;
  max-width: 100vw;
}
body {
  overflow-x: clip;
  max-width: 100vw;
  -webkit-overflow-scrolling: touch;
}
/* iOS Safari sometimes lifts inputs and triggers auto-zoom when
   font-size < 16px. Force a comfortable size on any text-entry control. */
input, textarea, select {
  font-size: 16px;
  font-family: inherit;
}
/* Honour notched displays — content respects the safe area on the sides */
nav, footer {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* ───────── Accessibility ───────── */
*:focus-visible {
  outline: 2px solid #4F8CFF;
  outline-offset: 3px;
  border-radius: 6px;
}
*:focus:not(:focus-visible) {
  outline: none;
}

/* Skip-to-content for keyboard users — only appears when focused */
.skip-link {
  position: absolute;
  top: -40px; left: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff;
  color: #06070B;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(60px); }

/* ───────── Mobile (≤ 560px) — covers everything from iPhone SE up to
   iPhone Plus / Pro Max widths. One unified breakpoint with values
   tuned to feel right on real devices. */
@media (max-width: 560px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Tighter section rhythm — was 100-140px, way too much for mobile.
     Half the desktop value gives the page a brisk pace without feeling
     cramped. */
  .section { padding: 64px 0 !important; }
  .hero { padding-top: 110px !important; padding-bottom: 56px !important; }

  /* Phone marquee on the Coinova page: tight top padding so the
     screenshots flow directly under the hero, with no visible "black
     band" of empty section padding between the hero glow and the
     screenshots. The mask-image's left/right transparent fade gives
     enough visual easing on its own. */
  .phone-marquee { padding: 8px 0 32px !important; }

  /* Final CTA + contact card weren't getting enough mobile attention */
  .final-cta { padding: 80px 0 88px !important; }
  .contact-card { padding: 56px 24px 64px !important; }

  /* Hero typography */
  h1, h1.hero-title { font-size: 40px !important; line-height: 1.0 !important; }
  .hero-sub { font-size: 15px !important; }
  .section-title { font-size: 30px !important; }
  .section-sub { font-size: 15px !important; margin-bottom: 36px !important; }

  /* Store buttons stay side-by-side (NOT wrapped) — make them shrink
     in unison instead. Each shares the row equally. */
  .store-row {
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 10px !important;
    width: 100%;
  }
  .store-btn {
    padding: 10px 14px !important;
    gap: 10px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center;
  }
  .store-btn-icon { width: 22px !important; height: 22px !important; }
  .store-btn-big { font-size: 14px !important; }
  .store-btn-small { font-size: 10px !important; }

  /* Phone marquee frames — readable but not overflowing */
  .phone-frame { width: 200px !important; }

  /* Showcase frames — was 300px, still felt big on small screens */
  .showcase-frame { width: 240px !important; }

  /* App cards (studio homepage) */
  .app-card { padding: 24px !important; }
  .app-card-name { font-size: 22px !important; }

  /* Showcase column gap — was 80px on desktop, way too tall on mobile */
  .showcase { gap: 32px !important; margin-bottom: 56px !important; }
  /* Last showcase in the chain has no following sibling — kill its
     bottom margin so it doesn't stack with the next section's top
     padding into a giant dark gap before the Privacy card. */
  .showcase:last-child { margin-bottom: 0 !important; }
  .showcase h3 { font-size: 28px !important; }
  .showcase p { font-size: 15px !important; }

  /* Feature grid + Privacy section + values cards */
  .feature, .value-card { padding: 22px !important; }
  .privacy-card { padding: 48px 24px !important; }
  .privacy-card h2 { font-size: 28px !important; }

  /* Multi-language hellos / story / contact card */
  .story-quote { font-size: 24px !important; }
  .contact-card h2 { font-size: 32px !important; }

  /* Marquee strip text */
  .marquee-item { font-size: 22px !important; }
}

/* ───────── Mobile scroll performance ─────────
   Three things were causing scroll-stutter / stickiness on phones:

   1. `scroll-snap-type: x mandatory` on the auto-scrolling phone marquee
      hijacked the vertical scroll gesture. When a user's finger landed on
      that section and tried to scroll DOWN, the browser tried to snap
      HORIZONTALLY — which froze the page for a beat. Switch to
      `scroll-snap-type: none` on mobile so vertical scroll passes
      through cleanly.

   2. `backdrop-filter: blur(20px)` on the fixed nav causes a fullscreen
      repaint on every scroll frame, especially expensive on iOS Safari.
      Replace with a solid (mostly opaque) background on mobile.

   3. The body grain texture (fixed-position SVG noise overlay) repaints
      on every scroll on mobile because it sits on its own layer above
      everything. Drop it on small screens — visual loss is negligible
      at low pixel density anyway.
*/
@media (max-width: 768px) {
  .phone-marquee {
    /* Let vertical scroll pass through cleanly */
    touch-action: pan-y !important;
  }
  .phone-track {
    scroll-snap-type: none !important;
  }
  .phone-frame {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }
  /* Drop the heavy fullscreen blur on mobile — replace with a near-opaque
     solid color. Visually almost identical, but skips the per-frame GPU
     blur that causes stutter. */
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6, 7, 11, 0.94) !important;
  }
  /* Skip the grain overlay on mobile — it forces a fixed-layer repaint
     on every scroll frame and the texture is invisible at typical phone
     pixel density anyway. */
  body::before {
    display: none !important;
  }
  /* Mobile-only orb perf overrides.
     Previous attempts only added `will-change` here, but that was not
     enough — the real cost on mobile Safari was two things together:
       (a) `mix-blend-mode: screen` forces per-frame software-side blending,
       (b) `filter: blur(120px)` on a 920px element is a huge GPU rasterize.
     On a phone the orbs cover most of the hero anyway, so dropping the
     screen blend is visually almost imperceptible (overlap regions just
     alpha-stack instead of color-mixing) and the blur radius can be cut
     in half without losing the soft-glow look. The result is a massive
     reduction in compositor work on every scroll frame. */
  .orb {
    will-change: transform;
    mix-blend-mode: normal !important;
  }
  .orb-1 { filter: blur(70px) !important; opacity: 0.55 !important; }
  .orb-2 { filter: blur(60px) !important; opacity: 0.40 !important; }
  .orb-3 { filter: blur(60px) !important; opacity: 0.40 !important; }
  .orb-4 { filter: blur(40px) !important; opacity: 0.50 !important; }

  /* Native momentum scroll on iOS — already set on body, but reaffirm here
     and ensure no element below disables it. The previous fix block
     touched `touch-action` on the marquee only; making it explicit on
     html/body too prevents any descendant from accidentally trapping
     vertical scroll. */
  html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
  }

  /* Phone-frame shadow on mobile.
     Heavier, softer drop-shadow with a much lighter rim — so the dark
     pools under adjacent frames overlap and blend into each other
     instead of each phone reading as a hard-edged cutout. The marquee
     animation is already gated by IntersectionObserver, so the shadow
     blur cost only matters while the marquee is on-screen. */
  .phone-frame {
    box-shadow:
      0 24px 56px rgba(0, 0, 0, 0.65),
      0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  }
  .showcase-frame {
    box-shadow:
      0 18px 40px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255,255,255,0.07),
      inset 0 0 0 1px rgba(255,255,255,0.05) !important;
  }
  /* The showcase halos are now plain layered radial-gradients (no
     filter: blur), so they're cheap to paint on mobile and we keep
     them visible — the chromatic bloom behind each frame is part of
     the brand look. (Previous version disabled them here because the
     old filter: blur(60px) implementation was genuinely expensive on
     mobile GPUs.) */
}

/* Tiny-phone tightening for ≤ 360px (iPhone SE 1st gen, old Androids) */
@media (max-width: 360px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  h1, h1.hero-title { font-size: 34px !important; }
  .section-title { font-size: 26px !important; }
  .phone-frame { width: 180px !important; }
  .showcase-frame { width: 220px !important; }
  /* `.store-btn-small { display: none }` was here previously — removed
     because Android Chrome's default viewport often reports ≤ 360px,
     which made the "Download on the" / "Get it on" labels disappear on
     completely normal phones. The buttons have plenty of room to show
     both lines on any modern device. */
  .store-btn-big { font-size: 13px !important; }
  .store-btn { padding: 10px 12px !important; }
}

/* ───────── Ultra-wide displays (1600px+) ─────────
   Don't let content stretch into a barren rectangle. The container
   has max-width: 1200px already, but we can centre the page-level
   gradient orbs more deliberately at huge widths. */
@media (min-width: 1600px) {
  .container { max-width: 1240px; }
  /* Headlines could go even bigger on ultra-wide, but clamp() already
     handles that. Just add a bit of side margin so the hero glow
     doesn't smash into the very edge. */
  .hero { padding-left: 24px; padding-right: 24px; }
}

/* ───────── Print ─────────
   Mainly for the legal pages — hide nav/footer/decoration when
   someone prints the privacy or terms. */
@media print {
  nav, footer, .grid-bg, .legal-hero::before, .legal-hero::after,
  .orb, .marquee-strip, .phone-marquee, body::before {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  a { color: #0A6CFF !important; }
  .legal-hero { padding: 0 0 24px !important; }
  .legal { max-width: none !important; padding: 0 !important; }
  .legal h2, h1 { color: black !important; break-after: avoid; }
  .legal p, .legal li { color: #222 !important; }
}

/* ───────── Reduced motion (system preference) ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .orb, .marquee-track, .phone-track { animation: none !important; }
}

/* ───────── High-contrast mode ───────── */
@media (prefers-contrast: more) {
  body { --text-2: rgba(255,255,255,0.85); --text-3: rgba(255,255,255,0.65); --border: rgba(255,255,255,0.16); }
  .feature, .app-card, .value-card { border-color: rgba(255,255,255,0.22) !important; }
}

/* ───────── Unified footer ─────────
   Each page used its own footer padding (48/64, 56/72, 40/56) which made
   the height jump as users navigated between pages. Locked to a single
   compact value site-wide. The bottom respects the iPhone home-indicator
   safe area so the line height stays consistent regardless of device. */
footer {
  padding-top: 36px !important;
  padding-bottom: calc(44px + env(safe-area-inset-bottom)) !important;
  font-size: 13px !important;
}
footer .footer-inner,
footer > .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  row-gap: 12px;        /* tighter when content wraps to two lines on phones */
}
@media (max-width: 560px) {
  footer {
    padding-top: 28px !important;
    padding-bottom: calc(36px + env(safe-area-inset-bottom)) !important;
    text-align: center;
  }
  footer .footer-inner,
  footer > .container {
    justify-content: center;
    text-align: center;
  }
  .footer-links { justify-content: center; }
}

/* ───────── Selection ───────── */
::selection {
  background: rgba(79,140,255,0.32);
  color: #fff;
}
::-moz-selection {
  background: rgba(79,140,255,0.32);
  color: #fff;
}

/* ───────── Image fallback styling ─────────
   When a screenshot fails to load (CDN blocked, etc.) we get a clean
   placeholder instead of a broken-image icon. */
img {
  image-rendering: -webkit-optimize-contrast;
}