/* ═══════════════════════════════════════════════════
   QELNIX — responsive-mobile.css
   Mobile-first responsive system
   Breakpoints: 480 · 640 · 768 · 1024
   vibe-responsive
═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   TOUCH: hide custom cursor, restore pointer,
   eliminate 300ms tap delay on interactive elements
══════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  body, button, a { cursor: auto !important; }
  .cursor-dot,
  .cursor-ring { display: none !important; }

  /* touch-action: manipulation removes the 300ms tap delay
     without disabling pinch-zoom (user-scalable=yes stays) */
  a, button, [role="button"],
  input, select, textarea,
  label, .btn, .pp-cta-link,
  .nav-link, .mobile-nav-link {
    touch-action: manipulation;
  }
}

/* ══════════════════════════════════════════════════
   NAV — horizontal padding on mobile
   (components.css has padding: 24px 60px which is
   far too wide for phones — override here)
══════════════════════════════════════════════════ */
@media (max-width: 960px) {
  #nav         { padding-left: 24px !important; padding-right: 24px !important; }
  #nav.scrolled{ padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 480px) {
  #nav         { padding-left: 16px !important; padding-right: 16px !important; }
  #nav.scrolled{ padding-left: 16px !important; padding-right: 16px !important; }
}

/* ══════════════════════════════════════════════════
   SAFE AREA INSET — notch / Dynamic Island / home bar
   (iPhone 14 Pro, 15 Pro, Android foldables)
══════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  #nav {
    padding-top: max(16px, calc(env(safe-area-inset-top) + 10px)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  #mobile-nav {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  footer {
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)) !important;
  }
}

/* ══════════════════════════════════════════════════
   iOS SAFARI — 100dvh FIX
   iOS Safari includes browser chrome in 100vh, cutting
   off content. dvh (dynamic viewport height) fixes this.
   Fallback: 100vh for browsers that don't support dvh.
══════════════════════════════════════════════════ */
@supports (height: 100dvh) {
  @media (max-width: 1024px) {
    #hero {
      height: 100dvh !important;
    }
    .products-hscroll-zone,
    .product-panel {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
    #mobile-nav {
      height: 100dvh !important;
    }
    .valori-intro,
    .piano-intro {
      min-height: 100dvh !important;
    }
  }
}

/* ══════════════════════════════════════════════════
   MOBILE — disabilita animazioni CSS inline del hero
   grid-drift (background-position paint), float-el
   e pulse-dot causano paint continuo su CPU mobile.
══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Grid drift — background-position non è compositable */
  #hero-layer-1 {
    animation: none !important;
    background-size: 48px 48px; /* static, smaller grid */
  }

  /* Floating SVG deco — decorativi, non necessari su mobile */
  #hero-layer-6 .float-el {
    display: none !important;
  }

  /* Urgency dot pulse */
  .urgency-dot {
    animation: none !important;
    box-shadow: 0 0 0 3px rgba(240, 120, 50, 0.4);
  }
}

/* ══════════════════════════════════════════════════
   CONTAINER — fluid padding
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section   { padding: 64px 0; }
}

/* ══════════════════════════════════════════════════
   HAMBURGER BUTTON
══════════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--c-white-20);
  border-radius: var(--r-sm);
  padding: 0;
  cursor: pointer;
  z-index: 600;
  position: relative;
  transition: border-color var(--t-fast);
  flex-shrink: 0;
}
.nav-hamburger:hover { border-color: var(--c-cyan); }

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--c-white);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
  transform-origin: center;
}

/* Open state */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-hamburger { display: flex; }
  .nav-cta-wrap  { display: none; }
}

/* ══════════════════════════════════════════════════
   MOBILE NAV OVERLAY
══════════════════════════════════════════════════ */
#mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 550;
  background: rgba(2,12,27,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
  /* Prevent background scroll when nav is open */
  overscroll-behavior: contain;
}

#mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 320px;
}

.mobile-nav-links a {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--c-white-60);
  padding: 14px 24px;
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
}

.mobile-nav-links a:hover,
.mobile-nav-links a:focus {
  color: var(--c-cyan);
  background: rgba(0,212,255,0.05);
}

.mobile-nav-cta {
  margin-top: 20px;
}

.mobile-nav-cta .btn-mag {
  font-size: 14px;
  padding: 14px 36px;
}

/* ══════════════════════════════════════════════════
   HERO — svh fix + small screen
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #hero {
    height: 100svh;
    min-height: 600px;
    /* Isolate hero reflow — canvas changes don't trigger ancestor layout recalc */
    contain: layout style;
  }

  .hero-inner {
    padding: 32px 24px;
    margin: 0 16px;
  }

  .hero-sub {
    font-size: clamp(14px, 3.5vw, 17px);
    margin-bottom: 40px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    padding: 16px 32px;
    min-height: 52px;
  }

  /* Letterbox bars smaller */
  .letterbox-bar { height: 20px; }
}

@media (max-width: 480px) {
  .hero-eyebrow { font-size: 9px; padding: 7px 14px; margin-bottom: 28px; }
}

/* ══════════════════════════════════════════════════
   STATS ROW — 1 col on very small screens
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-cell { padding: 36px 20px; }
  .stat-val  { font-size: clamp(28px, 8vw, 40px); }
}

/* ══════════════════════════════════════════════════
   PROBLEM GRID — stack on mobile
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .problem-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin-top: 40px;
  }
  .problem-stat { font-size: 40px; }
}

/* ══════════════════════════════════════════════════
   STORY SECTION — stack on mobile
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .story-visual {
    height: 280px !important;
  }
  .story-stat-grid {
    position: static !important;
    margin-top: 16px;
  }
}

/* ══════════════════════════════════════════════════
   PRODUCTS SECTION
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .products-intro {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 40px;
  }

  /* Product cards horizontal scroll: allow touch swipe */
  .products-scroll-track {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 20px;
    /* Disable GSAP transform on mobile - let native scroll work */
  }

  .product-card {
    width: 300px !important;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  /* Disable GSAP 3D tilt on touch */
  .product-card:hover { transform: none; }
}

@media (max-width: 480px) {
  .product-card { width: 85vw !important; }
}

/* ══════════════════════════════════════════════════
   CINEMATIC PRODUCT PANELS (GSAP hscroll) —
   Collapse to vertical stack on mobile
══════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .product-panel {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 80px 24px 60px !important;
    gap: 40px !important;
  }
}

/* ══════════════════════════════════════════════════
   SOCIAL PROOF
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .proof-grid {
    grid-template-columns: 1fr !important;
  }
  .proof-card:nth-child(1) {
    grid-template-columns: 1fr !important;
    padding: 32px 24px !important;
  }
}

/* ══════════════════════════════════════════════════
   BRAND SECTION
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .brand-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .brand-card:nth-child(1) { grid-template-columns: auto 1fr !important; }
}

/* ══════════════════════════════════════════════════
   EARNINGS / WHY / TEAM
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .earnings-layout { grid-template-columns: 1fr !important; gap: 48px !important; }
  .why-layout      { grid-template-columns: 1fr !important; gap: 40px !important; }
  .team-grid       { grid-template-columns: 1fr !important; max-width: 420px !important; }
  .team-header     { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 40px !important; }
  .team-card:nth-child(2) { margin-top: 0 !important; }
}

/* ══════════════════════════════════════════════════
   CALCULATOR
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .calc-controls  { grid-template-columns: 1fr !important; }
  .calc-result    { grid-template-columns: 1fr !important; }

  /* Form inputs: 16px prevents iOS auto-zoom */
  input[type="range"],
  input[type="text"],
  input[type="email"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════
   CTA BOX
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cta-box {
    padding: 56px 24px !important;
    margin: 0 16px;
    border-radius: var(--r-lg) !important;
  }

  #cta::after { display: none; } /* hide huge ghost text on mobile */
}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  footer {
    padding: 40px 20px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .footer-links { flex-wrap: wrap; gap: 16px; }
}

/* ══════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .faq-q {
    font-size: 15px !important;
    padding: 18px 16px !important;
  }
  .faq-a {
    padding: 0 16px 18px !important;
  }
}

/* ══════════════════════════════════════════════════
   SECTION NUMBERS (editorial ghost text) — scale down
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .sec-num  { font-size: clamp(56px, 20vw, 90px); }
  #hero::after { font-size: clamp(80px, 28vw, 160px); }
}

/* ══════════════════════════════════════════════════
   WHY ITEMS — grid tightened on small screens
   (3.5rem column too narrow for 64px font on 360px phones)
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .why-item {
    grid-template-columns: 2.5rem 1fr !important;
    gap: 12px !important;
  }
  .why-num {
    font-size: 40px !important;
    top: -4px !important;
  }
}

/* ══════════════════════════════════════════════════
   HERO LANDSCAPE — phones rotated sideways
   (100svh on landscape = very short; allow natural height)
══════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  #hero {
    height: auto !important;
    min-height: 100svh !important;
    padding-bottom: 48px;
  }
  .hero-inner {
    padding: 16px 24px !important;
    margin: 0 !important;
  }
  .letterbox-bar { height: 12px !important; }
}

/* ══════════════════════════════════════════════════
   EDITORIAL LABEL ROTATION — disable on mobile
   (layout-innovator's -1.5deg rotation looks awkward
   on small screens and can cause layout shift)
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .t-label { transform: none !important; }
}

/* ══════════════════════════════════════════════════
   PROOF CARDS — normalize asymmetric padding on mobile
   (layout-innovator applies deliberate unequal padding
   that wastes space on narrow screens)
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .proof-card:nth-child(2),
  .proof-card:nth-child(3) {
    padding: 28px 20px !important;
  }
}

/* ══════════════════════════════════════════════════
   VERY SMALL SCREENS — 360px and below
   (entry-level Android phones, iPhone SE 1st gen)
══════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .t-h2 { font-size: 28px !important; }
  .t-h3 { font-size: 18px !important; }
  .t-body { font-size: 14px !important; }
  .hero-eyebrow { font-size: 8px !important; letter-spacing: 2px !important; }
  .stat-val { font-size: clamp(24px, 7vw, 36px) !important; }
  .container { padding: 0 12px !important; }
  .section { padding: 48px 0 !important; }
  .btn-primary, .btn-outline, .btn-mag {
    font-size: 13px !important;
    padding: 14px 20px !important;
  }
}

/* ══════════════════════════════════════════════════
   LEVEL ROWS (earnings table) — horizontal scroll
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .levels-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .level-row {
    min-width: 560px;
  }
}

/* ══════════════════════════════════════════════════
   DEV GRID (team / tech section)
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .dev-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════
   TOUCH TARGETS — buttons & links min 44×44px
══════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .btn-primary,
  .btn-outline,
  .btn-mag {
    min-height: 48px;
  }

  .nav-hamburger { min-width: 44px; min-height: 44px; }

  /* FAQ tap target */
  .faq-q { min-height: 52px; display: flex; align-items: center; }

  /* Nav links tap target */
  .mobile-nav-links a { min-height: 52px; display: flex; align-items: center; justify-content: center; }

  /* Eliminate 300ms tap delay on interactive elements */
  .btn-primary, .btn-outline, .btn-mag,
  .faq-q, .nav-hamburger, .mobile-nav-links a,
  .nav-links a, [role="button"] {
    touch-action: manipulation;
  }
}

/* ══════════════════════════════════════════════════
   ANIMATIONS — reduce on mobile (performance + battery)
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Disable spotlight cursor effect (no mouse on touch) */
  .spotlight-overlay { display: none !important; }

  /* Reduce grain animation frames */
  .grain-overlay { animation: none; background-position: 0 0; }

  /* Disable parallax/translate heavy transforms */
  [data-speed],
  [data-parallax] {
    transform: none !important;
  }

  /* Disable blob morph on mobile (compositing cost) */
  .team-av { animation: none !important; border-radius: 50% !important; }

  /* Faster transitions on touch */
  * {
    transition-duration: 0.15s !important;
  }
  /* Re-allow longer intentional animations */
  .cta-box,
  .nav-orb-ring,
  .marquee-track,
  .grain-overlay,
  .hero-pulse,
  .scroll-line,
  .urgency-dot {
    transition-duration: unset !important;
  }
}

/* ══════════════════════════════════════════════════
   PREFERS REDUCED MOTION — full override
══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════
   THREE.JS CANVAS — hide on very slow/old devices
   (JS will add .no-webgl to body if WebGL fails)
══════════════════════════════════════════════════ */
body.no-webgl #hero-layer-2 { display: none !important; }

/* ══════════════════════════════════════════════════
   MARQUEE — pause on touch for readability
══════════════════════════════════════════════════ */
@media (hover: none) {
  .marquee-wrap:hover .marquee-track { animation-play-state: running; }
}

/* ══════════════════════════════════════════════════
   INLINE HACK — story section responsive
   (story-grid defined inline; override via media)
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .story-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .story-visual { height: 300px !important; }
}

/* ══════════════════════════════════════════════════
   PRODUCT SCROLL TRACK — scroll padding & momentum
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .products-scroll-track {
    scroll-padding-left: 16px;
    /* Modern replacement for deprecated -webkit-overflow-scrolling: touch */
    overscroll-behavior-x: contain;
  }
}

/* ══════════════════════════════════════════════════
   PLACE CHIPS — wrap on small screens
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .place-chips { flex-wrap: wrap !important; gap: 8px !important; }
  .place-chip  { flex: 1; min-width: calc(50% - 8px); justify-content: center; }
}

/* ══════════════════════════════════════════════════
   TESTIMONY / INLINE-DEFINED COMPONENTS
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .testimony-featured { padding: 32px 24px !important; }

  /* Inline story stats grid */
  .story-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    position: static !important;
    margin-top: 16px !important;
  }
}

/* ══════════════════════════════════════════════════
   HERO SECTION — small screens
   Disable heavy ::after ghost text on narrow screens
══════════════════════════════════════════════════ */
@media (max-width: 400px) {
  #hero::after { content: none; }
}

/* ══════════════════════════════════════════════════
   URGENCY BAR — stack on small phones
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .urgency-bar { flex-direction: column; align-items: flex-start; gap: 8px !important; }
}

/* ══════════════════════════════════════════════════
   TIMELINE — reduce left padding on mobile
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .timeline { padding-left: 24px !important; }
  .timeline-item { padding-left: 20px !important; }
}

/* ══════════════════════════════════════════════════
   CTA FORM — full-width input on mobile
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cta-form {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .cta-form input,
  .cta-form button {
    width: 100% !important;
    border-radius: var(--r-md) !important;
  }
}

/* ══════════════════════════════════════════════════
   EARNINGS NARRATIVE BEAT — journey on mobile
══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .enb-journey { gap: 10px; }
  .enb-step    { font-size: 10px !important; }
  .enb-arrow   { display: none; }
}

/* ══════════════════════════════════════════════════
   CONTENT-VISIBILITY — DISABLED on mobile
   content-visibility:auto + GSAP ScrollTrigger = broken scroll positions.
   On mobile, #products (6 stacked panels ~4200px) vs 600px placeholder
   causes a ~3600px position jump that breaks ALL trigger positions below.
   Performance cost is acceptable; correctness is not negotiable.
══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #act-1,
  #brand,
  #products,
  #why,
  #earnings,
  #team,
  #social-proof,
  #calculator,
  #cta,
  footer {
    content-visibility: visible;
    contain-intrinsic-size: unset;
    contain: none;
  }
}

/* ══════════════════════════════════════════════════
   PREVENT HORIZONTAL SCROLL — global catch-all
══════════════════════════════════════════════════ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════
   HORIZONTAL SCROLL SECTIONS — MOBILE VERTICAL LAYOUT
   Disabilita il pin GSAP e converte tutto in card verticali
   Breakpoint: < 768px
════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Reset zone / track comuni a tutti e 3 ── */
  .products-hscroll-zone,
  .valori-hscroll-zone,
  .piano-hscroll-zone {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative !important;
    padding: 0 !important;      /* evita doppio padding con track */
  }

  .products-scroll-track,
  .valori-track,
  .piano-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: auto !important;
    transform: none !important;
    will-change: auto !important;
    padding: 0 16px 32px !important;
  }

  /* ──────────────────────────────────────────────
     PRODOTTI — product-panel (3 col → card mobile)
  ────────────────────────────────────────────── */
  .product-panel {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.02) !important;
    position: relative !important;
  }

  /* Accent border sinistra: usa colore del panel se disponibile */
  .product-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--c-cyan,#00d4ff), transparent);
    border-radius: 20px 0 0 20px;
  }

  /* Numero ghost di sfondo — adattato */
  .pp-bg-num {
    font-size: 80px !important;
    bottom: -0.05em !important;
    right: 16px !important;
    opacity: 0.4 !important;
  }

  /* Parte sinistra: header con nome, badge, prezzo, CTA */
  .pp-left {
    padding: 24px 20px 0 !important;
    gap: 10px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pp-name {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.05 !important;
  }

  .pp-price-hero {
    flex-wrap: wrap;
    gap: 6px !important;
  }

  .pp-price-val {
    font-size: clamp(26px, 6vw, 36px) !important;
  }

  .pp-cta-link {
    margin-top: 4px;
    font-size: 14px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Centro: immagine prodotto */
  .pp-center {
    height: 200px !important;
    padding: 16px !important;
    order: -1; /* immagine in cima alla card */
    background: linear-gradient(135deg, rgba(26,107,204,0.08), rgba(0,212,255,0.03)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  .pp-img {
    max-height: 180px !important;
    filter: drop-shadow(0 10px 30px rgba(0,212,255,0.25)) !important;
  }

  .pp-img--tower {
    max-height: 190px !important;
  }

  /* Glow ridotto */
  .pp-img-glow {
    width: 40% !important;
    height: 40% !important;
    filter: blur(10px) !important;
  }

  /* Parte destra: specifiche tecniche */
  .pp-right {
    padding: 20px 20px 24px !important;
    gap: 16px !important;
    opacity: 1 !important;
    transform: none !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
  }

  .pp-spec-group { gap: 8px !important; }

  .pp-spec {
    padding-bottom: 8px !important;
    font-size: 12px !important;
  }

  .pp-spec-label { font-size: 10px !important; }

  .pp-earn-box {
    padding: 14px 16px !important;
  }

  .pp-earn-val {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  /* Counter pannello — posizione relativa */
  .pp-counter {
    position: static !important;
    padding: 12px 20px 0 !important;
    font-size: 10px !important;
    order: 99;
    opacity: 0.3;
  }

  /* Progress dots — nascondi su mobile (nav non serve in layout verticale) */
  .pp-progress-dots { display: none !important; }

  /* ──────────────────────────────────────────────
     VALORI — valori-panel (2 col → card mobile)
  ────────────────────────────────────────────── */
  .valori-intro {
    min-height: auto !important;
    padding: 80px 0 48px !important;
  }

  .valori-panel {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 28px 20px 24px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px !important;
    border-left: 3px solid var(--vp-accent, #00d4ff) !important;
    background: var(--c-bg) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .vp-bg-num {
    font-size: clamp(80px, 30vw, 140px) !important;
    bottom: -0.05em !important;
    right: 8px !important;
    opacity: 0.6 !important;
  }

  .vp-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    padding: 0 !important;
    opacity: 1 !important;
  }

  .vp-left,
  .vp-right {
    opacity: 1 !important;
    transform: none !important;
  }

  .vp-left { gap: 12px !important; }

  .vp-icon { font-size: 36px !important; }

  .vp-title {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  .vp-desc {
    font-size: 14px !important;
    max-width: none !important;
  }

  /* Stats in riga orizzontale */
  .vp-right { gap: 0 !important; }

  .vp-stat-block {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  .vp-stat {
    flex: 1;
    min-width: calc(50% - 1px);
    padding: 14px 12px !important;
    border-left: none !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  .vp-stat:nth-child(even) { border-right: none !important; }

  .vp-stat-val {
    font-size: clamp(20px, 5vw, 28px) !important;
    margin-bottom: 2px !important;
  }

  .vp-stat-label { font-size: 11px !important; }

  /* Barra progresso — riposizionata */
  .vp-progress {
    position: static !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
  }

  .vp-visual { display: none !important; } /* risparmia compositing */

  /* ──────────────────────────────────────────────
     PIANO — piano-panel (2 col → card mobile)
  ────────────────────────────────────────────── */
  .piano-intro {
    min-height: auto !important;
    padding: 80px 0 48px !important;
  }

  .piano-panel {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 28px 20px 24px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px !important;
    border-left: 3px solid var(--pp-accent, #00d4ff) !important;
    background: var(--c-bg) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .pp3d-bg-num {
    font-size: clamp(80px, 30vw, 140px) !important;
    bottom: -0.05em !important;
    right: 8px !important;
    opacity: 0.6 !important;
  }

  .pp3d-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 0 !important;
  }

  .pp3d-left,
  .pp3d-right {
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pp3d-phase-badge {
    font-size: 10px !important;
    padding: 4px 12px !important;
    margin-bottom: 8px !important;
  }

  .pp3d-title {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .pp3d-subtitle {
    font-size: 12px !important;
  }

  .pp3d-overview {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* Actions list */
  .pp3d-actions { gap: 16px !important; }

  .pp3d-action-title { font-size: 13px !important; }
  .pp3d-action-desc  { font-size: 12px !important; }

  /* KPI row: wrap su 2 colonne */
  .pp3d-kpi-row {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-top: 14px !important;
  }

  .pp3d-kpi {
    flex: 1;
    min-width: calc(50% - 8px) !important;
    font-size: 11px !important;
  }

  .pp3d-kpi span {
    font-size: clamp(16px, 4vw, 22px) !important;
  }

  /* Counter posizione relativa */
  .pp3d-counter {
    position: static !important;
    margin-top: 16px !important;
    font-size: 10px !important;
    opacity: 0.3 !important;
  }

  /* ── Sezioni intro con full-height min disabilitato ── */
  .valori-intro,
  .piano-intro {
    min-height: auto !important;
  }
}

/* ── Tablet: 768–1024px → pannelli mantenuti ma dimensioni ridotte ── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Product panels: 3 col → 2+1 */
  .product-panel {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    min-height: 70vh !important;
    padding: 40px 32px !important;
    gap: 32px !important;
  }

  /* Nasconde la colonna right (specs) per dare respiro */
  .product-panel .pp-right { display: none !important; }
  .product-panel .pp-left  { gap: 14px !important; }

  .pp-img { max-height: 45vh !important; }

  /* Valori/Piano: già gestiti da @media(max-width:960px) nei componenti */
}

/* ════════════════════════════════════════════════════════
   TABLET RANGE GENERALE — 768px–1024px
   Sezioni che non avevano breakpoint intermedio
════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { padding: 0 40px; }
  .section   { padding: 96px 0; }

  /* Problem grid: 3 col → 2 col su tablet */
  .problem-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px;
  }

  /* Stats row: 4 celle OK ma riduco padding */
  .stat-cell { padding: 44px 24px; }

  /* CTA box padding ridotto */
  .cta-box { padding: 72px 48px !important; }

  /* Team grid: forza massimo 2 col su tablet stretto */
  .team-grid { max-width: 600px !important; }
}

/* ════════════════════════════════════════════════════════
   PROBLEMA-GRID — breakpoint aggiuntivo a 960px
   (tablet landscape — 3 col troppo strette)
════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .problem-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px;
  }
}

/* ════════════════════════════════════════════════════════
   STATS ROW — tablet 640-960px: griglia 2+2
════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════
   TESTIMONY SCROLL CARDS — tablet: 2 col
   (già 1 col a 1024px, ma tra 1024-1280 rimane 3 col
   che può essere stretta su alcuni tablet landscape)
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1100px) {
  .testimony-scroll { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════════════════════════════
   EARNINGS LAYOUT — tablet
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .earnings-layout {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

/* ════════════════════════════════════════════════════════
   PROOF GRID — tablet 2 col (già 1 col a 1024px, ok)
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1100px) {
  .proof-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════════════════════════════
   FOOTER — tablet layout
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 960px) {
  footer { gap: 32px !important; }
}

/* ════════════════════════════════════════════════════════
   HERO — tablet: font scale e padding
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-inner {
    padding: 40px 48px;
    max-width: 800px;
  }
  .hero-actions {
    gap: 12px;
  }
}

/* ════════════════════════════════════════════════════════
   BRAND SECTION — tablet
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .brand-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ════════════════════════════════════════════════════════
   CALCULATOR — tablet: form non si rompe
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 960px) {
  .calc-controls { grid-template-columns: 1fr 1fr !important; }
  .calc-result   { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════════════════════════════
   LEVEL ROWS — tablet: scroll orizzontale se serve
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .levels-table { overflow-x: auto; }
  .level-row    { min-width: 700px; }
}

/* ════════════════════════════════════════════════════════
   WHY LAYOUT — tablet
════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .why-layout {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

/* ════════════════════════════════════════════════════════
   SAFE AREA — tablet con notch (iPad Pro Face ID)
════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  @media (min-width: 769px) and (max-width: 1024px) {
    #nav {
      padding-left: max(40px, env(safe-area-inset-left)) !important;
      padding-right: max(40px, env(safe-area-inset-right)) !important;
    }
  }
}

/* ════════════════════════════════════════════════════════
   VERY WIDE SCREENS — 1920px+
   Evita che le section diventino troppo spaziose
════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  .container { max-width: 1440px; }
  .section   { padding: 160px 0; }
}

/* ════════════════════════════════════════════════════════
   TOUCH COMPOSITING OPTIMIZATIONS
   Riduce stacking contexts e GPU overdraw su mobile.
   transform-style:preserve-3d e will-change:transform
   creano layer compositing su ogni elemento — su mobile
   questo causa overdraw significativo.
════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  /* Flatten 3D stacking contexts — tilt is disabled on touch */
  .product-card,
  .product-panel,
  .team-card,
  .brand-card,
  .level-row {
    transform-style: flat !important;
  }

  /* Release scroll-track layer — GSAP hscroll is killed on mobile */
  .products-scroll-track,
  .testimony-scroll-track,
  .team-scroll-track {
    will-change: auto !important;
  }

  /* Disable shimmer animation on touch — saves a continuous paint */
  .shimmer-text {
    animation: none !important;
    -webkit-text-fill-color: var(--c-white);
    background: none;
    color: var(--c-white);
  }
}

/* ════════════════════════════════════════════════════════
   HERO — layout-innovator asymmetric fix per mobile
   layout-innovator.css imposta padding-right:48% e
   justify-content:flex-start → su mobile il contenuto
   occupa solo la metà sinistra (≈120px su iPhone SE).
   Override: centra tutto e azzera il padding asimmetrico.
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #hero-layer-5 {
    justify-content: center !important;
    align-items: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-inner {
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 32px 16px !important;
  }

  .hero-eyebrow {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-sub {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .hero-actions {
    justify-content: center !important;
  }

  .hero-scroll-hint {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .urgency-bar {
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════
   CENTRATURA MOBILE — sezioni left-aligned da layout-innovator
   Su desktop hanno testo left per look editoriale.
   Su mobile, centra per leggibilità su schermi stretti.
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sec header — left dal layout-innovator */
  .sec-header {
    text-align: center !important;
  }
  .sec-header .t-label {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Social proof header */
  #social-proof .container > div:first-child {
    text-align: center !important;
  }

  /* Brand section header */
  #brand .sec-header {
    text-align: center !important;
  }

  /* CTA intro text */
  .cta-box .t-label,
  .cta-box .t-h2 {
    text-align: center !important;
  }

  /* Valori / Piano intro */
  .valori-intro-inner,
  .piano-intro-inner {
    text-align: center !important;
  }

  /* sec-num (ghost editorial number) — non blocca il layout centrato */
  .sec-num {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
  }

  /* hero-scroll-hint left-offsetted da layout-innovator */
  .hero-scroll-hint {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Products narrative beat */
  .products-narrative-beat {
    text-align: center !important;
  }

  /* drag-hint: centrato */
  .drag-hint {
    justify-content: center !important;
  }

  /* Livelli / earnings: header centrato */
  .earnings-section-title,
  .earnings-intro { text-align: center !important; }

  /* Fix grid overflow: 1fr in CSS Grid si espande al min-content dell'item.
     minmax(0,1fr) lo vincola alla larghezza disponibile. */
  .earnings-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .earnings-layout > div {
    min-width: 0;
    max-width: 100%;
    overflow: visible; /* non clippiamo — il contenuto deve essere visibile */
  }
  /* Font-size del titolo scalato su mobile */
  #earnings .t-h2 {
    font-size: clamp(28px, 8vw, 48px) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Level list: forza overflow hidden per bloccare il min-content dei figli */
  .level-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    /* Crea un nuovo block formatting context — i flex item non escono */
    contain: layout !important;
  }

  /* Level row: min-width:0 è la chiave in Flexbox.
     CSS Flexbox imposta la min-width automatica al min-content dell'item (560px).
     Senza min-width:0, width:100% non può ridurre l'elemento sotto 560px. */
  .level-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;         /* Override automatic flex min-size */
    box-sizing: border-box !important;
  }

  /* Badge: dimensione fissa, non si restringe */
  .lv-badge {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  /* Bar area: si espande per riempire lo spazio disponibile */
  .lv-bar-area {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* Earnings: dimensione automatica, non si restringe */
  .lv-earnings {
    flex: 0 0 auto !important;
    text-align: right !important;
  }
  .lv-monthly {
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  .lv-daily {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* ════════════════════════════════════════════════════════
   DATA-REVEAL — bypass CSS initial state su mobile
   animations.css setta [data-reveal] { opacity:0 } come
   stato iniziale per GSAP. Su mobile bypassiamo tutto:
   visibilità immediata tramite CSS !important.
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* Mantieni solo il transform specifico se serve (none è già ok) */
  [data-reveal="scale"],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="none"] {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   ACT CINEMATIC PANELS — fix su mobile
   Le initial state CSS (opacity:0, translateY(110%)) vengono
   azzerate su mobile perché GSAP clearProps non basta se il
   JS guard skippa l'animazione senza resettare gli stili inline.
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Override delle initial states definite nel <style> inline in index.html */
  .acp-label,
  .acp-beat,
  .acp-hint {
    opacity: 1 !important;
  }

  .acp-title-inner {
    transform: translateY(0) !important;
  }

  .acp-line {
    transform: scaleY(1) !important;
  }

  /* Font-size ridotto per evitare overflow su schermi piccoli */
  .acp-title {
    font-size: clamp(28px, 8vw, 60px) !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  /* Contenitore pannello — niente overflow a destra */
  .act-cinematic-panel {
    overflow: hidden !important;
    transform: none !important;
    position: relative !important;
  }

  /* Contenuto centrato su mobile */
  .acp-content {
    transform: none !important;
    padding: 24px 20px !important;
  }
}

/* ════════════════════════════════════════════════════════
   OVERFLOW GLOBALE — catch-all per elementi che escono a destra
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Qualsiasi wrapper che può avere width fissa */
  .container,
  .sec-header,
  .hero-inner,
  .cta-box,
  .calc-box,
  .earnings-layout,
  .why-layout {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Testo che può eccedere */
  .pp-name,
  .vp-title,
  .pp3d-title,
  .t-h2,
  .t-h1 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Rimuovi margine negativo editoriale su mobile */
  .sec-num {
    margin-left: 0 !important;
  }
}