/* ============================================================
   RESPONSIVE SYSTEM — site-wide overrides
   ------------------------------------------------------------
   Loaded AFTER styles.css. Applies the doctrine:
     - clamp() titles + section padding (fluid)
     - body & labels FIXED (no vw on small text)
     - breakpoints: 1200 / 430 (tablet / mobile)
     - scroll-jacking only on desktop (handled per-section)
     - touch targets >= 44px on mobile
   ============================================================ */

:root {
  --content-max: 1280px;
  --content-max-wide: 1480px;
  --touch-min: 44px;

  /* fluid section padding tokens used across overrides */
  --section-pad-y: clamp(56px, 9vh, 120px);
  --section-pad-y-tight: clamp(40px, 7vh, 88px);
  --section-pad-x: clamp(20px, 4vw, 56px);
  --section-pad-x-tight: clamp(16px, 3vw, 32px);
}

/* ─── Fluid section padding ──────────────────────────────── */
.section { padding: var(--section-pad-y) var(--section-pad-x-tight); }
.section-tight { padding: var(--section-pad-y-tight) var(--section-pad-x-tight); }
.ps-section { padding: clamp(40px, 7vh, 56px) var(--section-pad-x-tight) var(--section-pad-y); }
.testimonial { padding: var(--section-pad-y) var(--section-pad-x-tight); }
.final-cta { padding: var(--section-pad-y) var(--section-pad-x-tight); }

/* ─── Nav: keep usable on mobile ─────────────────────────── */
.nav {
  padding: 0 clamp(12px, 3vw, 20px);
  gap: clamp(16px, 3vw, 36px);
}
.nav-right { gap: 6px; }
@media (max-width: 899px) {
  .nav-cta, .nav-login, .btn-primary, .btn-ghost-dark {
    min-height: var(--touch-min);
  }
}

/* ─── Hero: fluid margin + padding so it never overflows ─── */
.hero {
  margin: 0 clamp(12px, 2vw, 20px);
  padding: clamp(20px, 3vh, 28px) clamp(18px, 4vw, 32px) 0;
  border-radius: clamp(18px, 2vw, 28px);
}
.hero h1 {
  /* keep clamp; tighten min so it fits 320px viewports */
  font-size: clamp(34px, 5.6vw, 78px);
  text-wrap: balance;
}
.hero-sub { font-size: clamp(15px, 1.1vw, 18px); }
.hero-actions { flex-wrap: wrap; gap: 12px; }
.btn-primary, .btn-ghost-dark { white-space: nowrap; }

/* ─── Headlines + body inside sections ───────────────────── */
.section-title { font-size: clamp(28px, 3.4vw, 52px); text-wrap: balance; }
.section-sub { font-size: clamp(15px, 1.1vw, 19px); }
.section-header { margin: 0 auto clamp(36px, 6vh, 64px); }
.section-header.left { margin: 0 0 clamp(28px, 5vh, 48px); }

/* ─── Metrics ─────────────────────────────────────────────── */
.metrics-head h2 { font-size: clamp(26px, 3vw, 42px); }
.metrics-head p { font-size: clamp(15px, 1.2vw, 17px); }
.metric-value { font-size: clamp(36px, 4vw, 56px); }
.metric-impact .metric-value { font-size: clamp(48px, 6vw, 96px); }
.metric { padding: clamp(24px, 4vh, 36px) clamp(20px, 3vw, 28px); }

/* ─── Final CTA ───────────────────────────────────────────── */
.final-cta h2 { font-size: clamp(28px, 3.4vw, 48px); }
.final-cta p { font-size: clamp(15px, 1.2vw, 17px); }
.final-cta-actions { flex-wrap: wrap; gap: 12px; }

/* ─── Footer ──────────────────────────────────────────────── */
.footer { padding-left: var(--section-pad-x-tight); padding-right: var(--section-pad-x-tight); }
.footer-top { gap: clamp(32px, 4vw, 64px); }

/* ─── Products (dark grid) ────────────────────────────────── */
.product-name { font-size: clamp(20px, 1.8vw, 22px); }

/* ─── BM / PM / Attributes ────────────────────────────────── */
.bm-card { padding: clamp(24px, 3vw, 36px); }
.attr-card { padding: clamp(20px, 3vw, 32px); }
.pm-item { font-size: 14px; }

/* ─── Testimonial ─────────────────────────────────────────── */
.testimonial-quote { font-size: clamp(20px, 2.2vw, 34px); }

/* ============================================================
   BREAKPOINTS — consolidated 2-tier system: 1200 / 430
   Single tablet tier at ≤1199px (was 1180/1100/980/960).
   Single mobile tier at ≤430px  (was 720/640/600/560/480).
   ============================================================ */

/* Wide-screen cap (≥1481): no longer a media query. All listed wrappers
   (.nav, .metrics-inner, .ps-inner, .testimonial-inner, .products-inner,
   .final-cta-inner, .footer-inner, .section) already carry
   `max-width: 1280px` in styles.css, so the cap applies natively at any
   viewport ≥ 1280 — no need for a min-width media query. */

/* Laptop small / iPad landscape: keep 2-col-ish but reduce paddings. */
@media (max-width: 899px) {
  .nav-links { gap: 0; }
  .hero-actions { gap: 10px; }
}

/* Tablet portrait: hard structural change to single column. */
/* Tablet tier: nav-links/login/lang stay VISIBLE here — they only hide
   in the ≤460 mobile block where the burger takes over. The previous
   `display:none` rules in this @media were residual from the old 980px
   breakpoint and created a dead zone (461–1199px) with no nav at all. */
@media (max-width: 899px) {
  .metrics-head, .testimonial-inner, .final-cta-inner, .footer-top {
    grid-template-columns: 1fr;
  }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metric { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .metric:last-child { border-bottom: none; }

  .ps-grid { grid-template-columns: 1fr; }
  .ps-arrow { transform: rotate(90deg); margin: 0 auto; }

  .attrs-grid { grid-template-columns: repeat(2, 1fr); }
  .attr-card:nth-child(2n) { border-right: none; }

  .pm-grid { grid-template-columns: repeat(2, 1fr); }
  .bm-grid { grid-template-columns: 1fr; }
  .products-grid, .products-grid-4 { grid-template-columns: 1fr !important; }
  .bento { grid-template-columns: 1fr; }
  .b-big, .b-small, .b-wide { grid-column: span 1; }

  .testimonial-stats { flex-direction: row; flex-wrap: wrap; }
  .ts-card { flex: 1 1 220px; }

  .final-cta-inner { padding: 48px 32px; margin-inline: clamp(16px, 4vw, 24px); border-radius: 20px; }
  .final-cta-actions { justify-content: flex-start; }
}

/* Mobile (small tablet): collapse multi-column grids further. */
@media (max-width: 899px) {
  .nav { height: 56px; }            /* roomier touch target */
  .nav-logo img { height: 20px; }

  /* ─── Hero: rounded card sits on `.hero` itself, NOT on `.hero-sticky`
     — that way the trust marquee (a sibling of `.hero` inside
     `.hero-sticky`) lives OUTSIDE the rounded card and the dark frame
     ends right at the bottom of the mockup. */
  .hero-stage {
    min-height: 0;
  }
  .hero-sticky {
    position: relative;          /* disables desktop sticky behavior */
    top: 0;
    margin: 0;
    border-radius: 0;
    overflow: visible;
  }
  /* Cancel the scroll-driven fade/translate of .hero-inner (driven by
     --hero-progress in styles.css) and the BPM showcase pan/scale.
     On mobile the hero is a plain section. */
  .hero-inner {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-showcase {
    transform: none !important;
    opacity: 1 !important;
  }
  /* The BPM mock fader/SAT swap is also progress-driven (via
     --hero-progress = 0 on mobile, which keeps general view). */
  .showcase-screen { opacity: 1 !important; }
  .hero {
    /* Bigger outer margin so the blue card is properly inset from the
       viewport (≈25px per the user spec). */
    margin: 8px clamp(16px, 4vw, 24px) 0;
    border-radius: 20px;
    overflow: hidden;
    /* Card sizes to its content on mobile/tablet — the fixed 900px
       height from JSX would create a tall dark void below the mockup. */
    height: auto !important;
    min-height: 0 !important;
    /* Equal top/bottom inner padding so the content stack sits visually
       centered inside the dark card. The horizontal padding is slightly
       tighter than vertical so the mock can grow. */
    padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 32px);
    /* C1. Soft outer elevation — lifts the rounded card off the page bg. */
    box-shadow:
      0 8px 32px rgba(3, 16, 30, 0.18),
      0 2px 8px rgba(3, 16, 30, 0.12);
    /* C2. Inner top highlight — implies light source from above, breaks
       the "flat dark" feel without adding chrome. */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 32px rgba(3, 16, 30, 0.18),
      0 2px 8px rgba(3, 16, 30, 0.12);
  }
  /* C5. Radial highlight overlaid on the existing dark linear gradient —
     evokes a soft, top-left light source. */
  .hero.hero-dark .hero-bg {
    background:
      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(82, 140, 214, 0.15) 0%, transparent 50%),
      linear-gradient(135deg, #03101E 0%, #0A1F3A 60%, #143A6B 100%);
  }
  /* Disable the desktop scroll-jacking fade/translate on `.hero-inner`
     — mobile treats the hero as a plain section. The desktop CSS uses
     `var(--hero-progress, 0)`; we override to `none/1` here so any
     stale value from a viewport-resize transition doesn't bleed. */
  .hero-inner {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Same with `.hero-showcase` — the desktop pan-up tied to
     --hero-progress should not run on mobile. */
  .hero-showcase {
    transform: none !important;
    /* Sit inside the hero card with equal vertical breathing room top
       and bottom. The previous 112% bleed pushed the bezel past the
       hero card edges and got clipped — match the content column
       width so the bezel borders are fully visible. */
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    margin-top: clamp(12px, 2.5vh, 20px) !important;
    margin-bottom: clamp(12px, 2.5vh, 20px) !important;
    max-height: none !important;
    height: auto !important;
  }
  /* Inner pieces fill the showcase column exactly — no bleed past the
     hero card's content edges, so the bezel's left/right borders read
     as crisp lines instead of getting clipped by the hero's overflow. */
  .hero-showcase .showcase-sticky,
  .hero-showcase .showcase-inner,
  .hero-showcase .showcase-frame {
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: clamp(4px, 1.2vw, 8px) !important;
  }
  .hero-showcase .showcase-frame {
    padding: clamp(4px, 1.2vw, 8px) !important;
    border-radius: clamp(8px, 2vw, 14px) !important;
  }
  /* Headline must fit each phrase on ONE line on a 390px viewport.
     Longest phrase: "En semanas, no en años." (~23 chars). With the
     hero's 28px / side padding we have ~334px of content width, so
     headline tops out at ~27-28px. Use vw clamp for fluid scaling. */
  .hero h1 {
    /* Bigger than the previous mobile pass — matches the user's
       reference proportions: bold display headline, ~32-44px depending
       on viewport width. */
    font-size: clamp(28px, 7.4vw, 44px);
    line-height: 1.1;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
    white-space: pre-line;
  }
  /* Eyebrow pill — 25% smaller per spec. */
  .hero-eyebrow {
    font-size: 8.5px;
    padding: 5px 12px;
    letter-spacing: 0.10em;
    margin-bottom: 26px;
    border-radius: 999px;
  }
  /* Subhead: wide column, comfortable reading size — matches the
       reference where the sub fills nearly the same width as the
       buttons row. */
  .hero-sub {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 26px;
    /* Cap width so the sub never extends past the CTAs row beneath it. */
    max-width: 340px;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
  /* Recenter the headline + eyebrow stack while we're at it so the
     compact phone layout reads as a balanced, centered hero. */
  .hero h1,
  .hero-eyebrow { align-self: center; text-align: center; }
  /* CTAs side-by-side — 30% smaller than the previous mobile pass
     (was 52px tall / 15px text / 16×12 padding). */
  .hero-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    /* Don't stretch full-width — pills sit at their natural content
       width, centered in the row. */
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  .hero-actions > a {
    /* Bigger pills — matches the user reference: ~52px tall, 16px text
       with generous horizontal padding so they read as primary CTAs. */
    flex: 0 0 auto;
    min-height: 52px;
    padding: 15px 26px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
  }
  /* Hide the trailing arrow icon on the primary CTA — saves ~22px of
     horizontal space so "Solicita una demo" fits in a half-width pill. */
  .hero-actions .btn-primary svg { display: none; }
  /* C3. Subtle glow under the primary CTA — guides the eye without
     shouting. */
  .hero-actions .btn-primary {
    box-shadow:
      0 4px 16px rgba(82, 140, 214, 0.35),
      0 1px 3px rgba(0, 0, 0, 0.2);
  }
  /* Disclaimer sits below the actions row, centered. */
  .hero-disclaimer {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
  }

  /* Trust marquee — sits OUTSIDE the rounded hero card on mobile, on
     the page's light background. Logos render in their natural color.
     Small gap above so the card's bottom edge stays clear. */
  .trust {
    background: var(--bg);
    padding: 12px 0 16px;
    margin-top: 12px;
  }
  .trust-inner {
    padding: 0 16px;
  }
  .trust-label {
    color: var(--muted);
    margin-bottom: 10px;
    text-align: center;
  }
  /* Override the inline `height` props on each .trust-logo-img (sections.jsx
     sets per-logo heights inline). Force a small uniform ceiling on mobile.
     Logos keep their native colors against the white page background. */
  .trust-logo-img {
    height: auto !important;
    max-height: 18px !important;
    opacity: 0.7;
  }
  .trust-logo-img:hover {
    opacity: 0.95;
  }
  /* Edge fade mask gets adapted to the light surface */
  .trust-marquee {
    mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  }

  .attrs-grid { grid-template-columns: 1fr; }
  .attr-card { border-right: none; border-bottom: 1px solid var(--line); }
  .pm-grid { grid-template-columns: 1fr; }

  .metrics-grid, .metrics-grid-3 { grid-template-columns: 1fr 1fr; }
  .metric:last-child { border-bottom: none; }

  /* ─── A. Section-inner horizontal padding ──────────────────────────
     Override each section's lateral padding to 0 and shift the gutter
     to the inner wrapper so all sections share the same horizontal
     rhythm on mobile. */
  .metrics, .attrs, .ps-section, .testimonial, .final-cta,
  .products, .pm-section, .bm-section, .esquemas, .pshow,
  .walkthrough.pshow {
    padding-inline: 0;
  }
  .metrics-inner, .attrs-inner, .products-inner, .ps-inner,
  .testimonial-inner, .final-cta-inner, .footer-inner,
  .bm-inner, .pm-inner, .esquemas-inner {
    padding-inline: clamp(24px, 6vw, 36px);
  }

  /* ─── C. Trust marquee track ───────────────────────────────────────
     Slow the scroll proportional to the reduced track width on mobile. */
  .trust-marquee-track {
    gap: 36px;
    animation-duration: 100s;     /* ~70% of desktop's 70s speed */
  }

  /* ─── D.2 Attributes — single column, 5 rows (5 cards) ────────────
     Per spec: 1 column / 5 rows on mobile + tablet. Compact horizontal
     card layout (icon left, copy right) is supplied by attrs-gradient.css;
     this block just collapses the grid and disables the legacy horizontal
     scroll-snap behaviour. */
  .attrs-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
    gap: 16px;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .attrs-grid::-webkit-scrollbar { display: none; }
  /* Clear the legacy column-span rules so every card occupies the full
     single column. */
  .attr-card:nth-child(1),
  .attr-card:nth-child(2),
  .attr-card:nth-child(3),
  .attr-card:nth-child(4),
  .attr-card:nth-child(5) {
    grid-column: 1 / -1;
  }
  .attr-card {
    flex: none;
    scroll-snap-align: none;
    border-right: none;
    border-bottom: none;
    min-width: 0;
    /* Padding + internal sizing handled by attrs-gradient.css's
       horizontal-card rules — don't !important-override here. */
  }

  /* ─── D.3 Products — horizontal scroll-snap ─────────────────────────
     Same pattern as Attributes. Featured card stays in flow as the
     first item. */
  .products-grid,
  .products-grid.products-grid-4 {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding-inline: clamp(24px, 6vw, 36px);
    margin-inline: calc(-1 * clamp(24px, 6vw, 36px));
    gap: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(90deg, black 0, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, black 0, black calc(100% - 28px), transparent 100%);
  }
  .products-grid::-webkit-scrollbar,
  .products-grid.products-grid-4::-webkit-scrollbar { display: none; }
  .product-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }

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

  .ts-card { padding: 20px 24px; }
  .ts-value { font-size: 32px; }

  /* Touch target padding bump on chips and small buttons. */
  .nav-cta { padding: 10px 14px; }

  /* Hide secondary CTAs that crowd the topbar already covered by stepper. */
  .testimonial-controls { flex-wrap: wrap; }
}

/* Small mobile: 320–480px. Reduce padding, ensure no overflow.
   NOTE: hero/h1/eyebrow rules removed — they were stale from the old
   multi-tier breakpoint system and would override the new equal-padding
   + compact-content rules defined above. */
@media (max-width: 899px) {
  :root {
    --section-pad-y: clamp(40px, 7vh, 80px);
    --section-pad-x-tight: 16px;
  }

  .nav { padding: 0 12px; gap: 8px; }
  .nav-cta { padding: 9px 12px; font-size: 13px; }

  .section-title { font-size: clamp(24px, 7vw, 32px); }
  .section-sub { font-size: 15px; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-tag, .footer-contact { max-width: none; }

  .metric-impact .metric-value { font-size: clamp(44px, 13vw, 64px); }
  .metric-value { font-size: clamp(32px, 10vw, 44px); }

  .ts-value { font-size: 28px; }
  .testimonial-quote { font-size: clamp(18px, 5.2vw, 22px); }

  /* Stop wide horizontal items from forcing scroll */
  .trust-logos { flex-wrap: wrap; gap: 18px 24px; }
}

/* ─── Anti-overflow guard — last resort ────────────────────── */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }

/* ─── Testimonial: dark gradient for contrast with sections above ───── */
.testimonial {
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(82,140,214,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 5% 95%, rgba(163,212,232,0.10) 0%, transparent 70%),
    linear-gradient(135deg, #03101E 0%, #0A1F3A 60%, #143A6B 100%);
}

/* ─── Mobile Nav: hamburger + slide-in panel (≤899px) ───────────
   Default: hidden on desktop. Activated at ≤899px (tablet+mobile).
   Per the 2-tier system, the desktop nav cluster (links + login + lang
   + CTA) is completely replaced by the burger from this breakpoint down.
   ─────────────────────────────────────────────────────────────── */
.nav-burger,
.nav-mobile-scrim,
.nav-mobile-panel {
  display: none;
}

@media (max-width: 899px) {
  /* Hide the entire desktop nav cluster — links, language toggle,
     login link AND the on-bar CTA. Everything is rehoused inside the
     slide-in panel (which has its own CTA in the footer). */
  .nav-links,
  .nav-login,
  .nav-lang,
  .nav-cta {
    display: none !important;
  }

  /* Keep logo + burger on the bar. */
  .nav {
    justify-content: space-between;
    gap: 8px;
  }
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Burger button */
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 160ms cubic-bezier(0.4,0,0.2,1),
                border-color 160ms cubic-bezier(0.4,0,0.2,1);
  }
  .nav-burger:hover { background: var(--bg-tint); }
  .nav-burger__icon {
    position: relative;
    width: 18px;
    height: 14px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .nav-burger__icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 220ms cubic-bezier(0.4,0,0.2,1),
                opacity 160ms cubic-bezier(0.4,0,0.2,1);
    transform-origin: center;
  }
  .nav-burger__icon.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-burger__icon.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav-burger__icon.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Scrim behind panel */
  .nav-mobile-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.4,0,0.2,1);
    z-index: 998;
  }
  .nav-mobile-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Slide-in panel (from right) */
  .nav-mobile-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(86vw, 360px);
    background: var(--bg);
    box-shadow: -16px 0 48px rgba(0, 38, 82, 0.18);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4,0,0.2,1);
    z-index: 999;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-mobile-panel.is-open {
    transform: translateX(0);
  }

  .nav-mobile-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .nav-mobile-panel__logo img { height: 22px; display: block; }
  .nav-mobile-panel__close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-mobile-panel__close:hover { background: var(--bg-tint); }

  .nav-mobile-panel__links {
    display: flex;
    flex-direction: column;
    padding: 12px 8px;
    flex: 1 1 auto;
  }
  .nav-mobile-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 12px;
    font-family: var(--font-d);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: background 160ms cubic-bezier(0.4,0,0.2,1),
                color 160ms cubic-bezier(0.4,0,0.2,1);
  }
  .nav-mobile-link:hover,
  .nav-mobile-link:focus-visible {
    background: var(--bg-tint);
    color: var(--ink);
    outline: none;
  }

  .nav-mobile-panel__sep {
    height: 1px;
    background: var(--line);
    margin: 4px 16px;
    flex-shrink: 0;
  }

  .nav-mobile-panel__util {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 12px;
    flex-shrink: 0;
  }
  .nav-mobile-login {
    font-family: var(--font-d);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    padding: 12px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    transition: background 160ms cubic-bezier(0.4,0,0.2,1);
  }
  .nav-mobile-login:hover { background: var(--bg-tint); }

  .nav-mobile-lang {
    display: inline-flex;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
  }
  .nav-mobile-lang button {
    min-width: 44px;
    min-height: 44px;        /* WCAG 2.5.5 tap target */
    padding: 0 14px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    font-family: var(--font-d);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 160ms cubic-bezier(0.4,0,0.2,1),
                color 160ms cubic-bezier(0.4,0,0.2,1);
  }
  .nav-mobile-lang button.on {
    background: var(--navy);
    color: #FFFFFF;
  }

  .nav-mobile-panel__foot {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }
  /* Panel CTA matches the on-bar .nav-cta — same navy/white system. */
  .nav-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    background: var(--navy);
    color: #FFFFFF;
    border-radius: 10px;
    font-family: var(--font-d);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms cubic-bezier(0.4,0,0.2,1),
                transform 160ms cubic-bezier(0.4,0,0.2,1);
  }
  .nav-mobile-cta:hover { background: var(--navy-d); }
  .nav-mobile-cta:active { transform: translateY(1px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-panel,
  .nav-mobile-scrim,
  .nav-burger__icon span {
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}