/* ═══════════════════════════════════════════════════════════════
   8bitflow Mobile Optimization Styles — Consolidated
   Includes all mobile-polish refinements. Single @layer for
   clean cascade ordering over @layer base and @layer animations.
   ═══════════════════════════════════════════════════════════════ */

@layer mobile {

/* ── Base resets ── */
html, body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ── Smooth scrolling with reduced motion fallback ── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* .pb-safe is defined in base.css */

.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ═══════════════════════════════════════════════
   MOBILE (< 768px) — PRIMARY OPTIMIZATIONS
   ═══════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* Bottom nav shell is defined once in the MOBILE NAV section below */

  /* ── Bottom nav padding for content ── */
  main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8rem) !important;
  }

  /* ── Better touch targets: minimum 44x44px ── */
  .btn-primary, .btn-secondary,
  .card-interactive, .product-tile,
  [data-hover-lift], [data-hover-scale], [data-hover-glow],
  [data-magnetic], [data-ripple], [data-touch-feedback] {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── Navigation links touch targets ── */
  .nav-link {
    min-height: 44px;
    min-width: 44px;
  }

  /* Fix inline links that should NOT stretch to 44px */
  .footer-link,
  a.text-xs,
  a.text-sm:not(.btn-primary):not(.btn-secondary),
  p a, li a, span a {
    min-height: unset;
    min-width: unset;
  }

  /* ── Buttons: full-width only inside vertical stacks on mobile ── */
  .flex-col > .btn-primary,
  .flex-col > .btn-secondary,
  .flex-col > a.btn-primary,
  .flex-col > a.btn-secondary,
  .flex-col > button.btn-primary,
  .flex-col > button.btn-secondary,
  .flex-col > [data-magnetic].btn-primary,
  .flex-col > [data-magnetic].btn-secondary {
    width: 100%;
    max-width: calc(100vw - 2rem);
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Cards on mobile: normalize density and disable hover transforms ── */
  .card {
    border-radius: 0.875rem;
    padding: 1rem;
    box-shadow: 0 10px 30px -24px rgba(167, 139, 250, 0.35);
  }

  .card-interactive, .card-interactive:hover {
    transform: none !important;
    box-shadow: 0 4px 12px -4px rgba(167, 139, 250, 0.08) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    border-radius: 0.875rem;
    padding: 1rem;
  }

  .card-interactive:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease;
  }

  .process-step-card {
    padding: 1rem;
    border-radius: 0.875rem;
  }
  .process-step-card:hover {
    border-color: rgba(167, 139, 250, 0.12);
    box-shadow: none;
  }

  /* ── Product tile mobile density ── */
  .product-tile, .product-tile:hover {
    transform: none !important;
    box-shadow: 0 4px 12px -4px rgba(167, 139, 250, 0.08) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    border-radius: 0.875rem;
    padding: 1rem;
  }

  .product-tile:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease;
  }

  .product-tile p {
    line-height: 1.55;
  }

  .product-tile h3 {
    margin-bottom: 0.375rem;
  }

  .product-tile .flex.items-start.gap-3 {
    gap: 0.75rem;
  }

  /* Icon circle breathing room on mobile */
  .product-tile .p-2.bg-primary\/10,
  .product-tile .p-2.bg-surface-container-high {
    padding: 0.5rem;
    border-radius: 0.5rem;
  }

  /* ── Glass panel mobile ── */
  .glass, .glass-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ── Section spacing: deployed pages already use inner containers ── */
  section {
    padding-left: 0;
    padding-right: 0;
  }

  /* ── Typographic scale for mobile ── */
  h1:not([class*="text-"]) { font-size: 2rem; line-height: 1.2; letter-spacing: -0.02em; }
  h2:not([class*="text-"]) { font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; }
  h3:not([class*="text-"]) { font-size: 1.25rem; line-height: 1.35; }
  h4:not([class*="text-"]) { font-size: 1.125rem; }
  p  { font-size: 0.9375rem; line-height: 1.6; }

  h1, h2, h3 {
    text-wrap: balance;
  }

  p, li {
    overflow-wrap: anywhere;
  }

  img, svg, video, canvas {
    max-width: 100%;
  }

  /* ── Desktop nav stays at top (hidden on mobile anyway) ── */
  header[role="banner"],
  header.fixed,
  nav.fixed:not(.bottom-0):not([aria-label="Mobile navigation"]) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
  }

  /* ═══════════════════════════════════════════════════════════
     BOTTOM NAV — Premium Micro-interactions
     ═══════════════════════════════════════════════════════════ */
  nav[aria-label="Mobile navigation"],
  nav.fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  nav[aria-label="Mobile navigation"] a,
  nav.fixed.bottom-0 a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 64px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  nav[aria-label="Mobile navigation"] a.text-primary,
  nav.fixed.bottom-0 a.text-primary {
    position: relative;
  }

  nav[aria-label="Mobile navigation"] a.text-primary::after,
  nav.fixed.bottom-0 a.text-primary::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 6px rgba(167, 139, 250, 0.5);
  }

  nav[aria-label="Mobile navigation"] a:active,
  nav.fixed.bottom-0 a:active {
    transform: scale(0.88);
    transition: transform 0.1s ease;
  }

  /* Active indicator dot animation */
  nav[aria-label="Mobile navigation"] a .material-symbols-outlined,
  nav.fixed.bottom-0 a .material-symbols-outlined {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  nav[aria-label="Mobile navigation"] a:active .material-symbols-outlined,
  nav.fixed.bottom-0 a:active .material-symbols-outlined {
    transform: scale(0.85);
  }

  /* ── Mobile menu improvements ── */
  #mobile-menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #mobile-menu a {
    padding: 0.875rem 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }

  #mobile-menu a:active {
    background: rgba(167, 139, 250, 0.12);
    transform: scale(0.98);
  }


  .form-input, input[type="text"], input[type="email"],
  input[type="tel"], textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
  }

  /* ── Hero section mobile ── */
  .hero-viz {
    aspect-ratio: 10 / 9 !important;
    min-height: 300px;
  }

  /* ── Stats bar mobile ── */
  .stat-card {
    min-width: 0 !important;
    flex: 1;
  }

  /* ── Define Logic panels mobile ── */
  .dl-root {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
  }

  .dl-rule-panel {
    max-height: 50vh;
    overflow-y: auto;
  }

  /* ── Marquee: disabled on mobile — see full override below ── */

  /* ── How-it-works step text ── */
  .hiw-viz {
    min-height: clamp(250px, 65vw, 340px);
  }

  #hiw-step-2.hiw-viz,
  #hiw-step-3.hiw-viz {
    aspect-ratio: auto !important;
  }

  #hiw-step-2.hiw-viz {
    min-height: clamp(400px, 105vw, 480px);
  }

  #hiw-step-3.hiw-viz {
    min-height: clamp(420px, 112vw, 500px);
  }

  #hiw-step-2 .dl-mobile-root.dl-mobile-v2,
  #hiw-step-3 .dm-mobile-root.dm-mobile-v2 {
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
  }

  .hiw-tool-label {
    font-size: 12px !important;
  }

  .hiw-tool-sub {
    font-size: 12px !important;
  }

  /* ── Prevent sticky positioning issues on mobile ── */
  [style*="position: sticky"],
  [style*="position:sticky"] {
    position: relative !important;
    top: auto !important;
  }

  /* ── Card overflow fix: restore horizontal scroll where requested ── */
  .card.overflow-x-auto {
    overflow-x: auto;
  }

  /* ── Horizontal scroll containers ── */
  .overflow-x-auto,
  [data-scroll-snap],
  .custom-scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    -ms-overflow-style: auto;
    overscroll-behavior-x: contain;
  }

  .overflow-x-auto::-webkit-scrollbar,
  [data-scroll-snap]::-webkit-scrollbar,
  .custom-scroll::-webkit-scrollbar {
    display: block;
    height: 0.4rem;
  }

  .overflow-x-auto::-webkit-scrollbar-track,
  [data-scroll-snap]::-webkit-scrollbar-track,
  .custom-scroll::-webkit-scrollbar-track {
    background: rgba(18, 18, 21, 0.72);
    border-radius: 9999px;
  }

  .overflow-x-auto::-webkit-scrollbar-thumb,
  [data-scroll-snap]::-webkit-scrollbar-thumb,
  .custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 96, 0.9);
    border-radius: 9999px;
  }

  .overflow-x-auto::-webkit-scrollbar-thumb:hover,
  [data-scroll-snap]::-webkit-scrollbar-thumb:hover,
  .custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 139, 250, 0.95);
  }

  /* ── Grid layouts on small screens ── */
  .grid:not(.grid-cols-1) {
    gap: 1rem;
  }

  /* ── Prevent text truncation issues ── */
  .truncate, .line-clamp-2, .line-clamp-3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ── Touch feedback on interactive elements ── */
  .card-interactive:active,
  .product-tile:active,
  [data-hover-lift]:active,
  [data-hover-glow]:active {
    opacity: 0.9;
  }

  /* ── Scrollable horizontal containers ── */
  .custom-scroll {
    scrollbar-color: rgba(80, 80, 96, 0.9) rgba(18, 18, 21, 0.72);
  }

  /* ── Range slider mobile — larger touch targets ── */
  .range-slider {
    height: 44px;
    margin: 0;
  }

  .range-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    box-shadow: 0 0 0 8px rgba(167, 139, 250, 0.08);
  }

  .range-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  /* ── Footer links spacing ── */
  footer a {
    padding: 0.5rem 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Section heading mobile ── */
  .section-heading {
    font-size: 1.5rem;
  }

  /* ── Hero heading mobile ── */
  .hero-heading {
    font-size: 2.25rem;
  }

  /* ── Reduce motion on particles and heavy effects ── */
  [data-particle-mesh] canvas,
  [data-particle-mesh] svg {
    will-change: auto;
  }

  /* ── Prevent body scroll when mobile menu is open ── */
  body.menu-open {
    overflow: hidden;
  }

  /* Hide top hamburger header and slide-down menu; use bottom nav only */
  header[role="banner"].md\:hidden,
  #mobile-menu {
    display: none !important;
  }

  /* Remove top padding since header is gone */
  main {
    padding-top: 0 !important;
  }

  /* ── CTA sections mobile ── */
  .max-w-7xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── Pipeline/horizontal scroll items ── */
  .flex.min-w-max {
    min-width: max-content;
    padding-bottom: 0.5rem;
  }

  /* ═══════════════════════════════════════════════════════════
     PREMIUM MOBILE ANIMATIONS & MICRO-INTERACTIONS
     ═══════════════════════════════════════════════════════════ */

  /* ── Smooth button press feedback with haptic-feel ── */
  .btn-primary:active {
    transform: scale(0.96);
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }

  .btn-secondary:active {
    transform: scale(0.96);
    border-color: rgba(167, 139, 250, 0.4);
    transition: transform 0.1s ease, border-color 0.1s ease;
  }

  /* ── Stat cards subtle entrance ── */
  .stat-card {
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .stat-card:active {
    transform: scale(0.96);
    border-color: rgba(167, 139, 250, 0.3);
  }

  /* ── Social proof chips tap feedback ── */
  .bg-surface-container:active:not(.btn-primary):not(.btn-secondary) {
    border-color: rgba(167, 139, 250, 0.2);
    transform: scale(0.97);
    transition: border-color 0.15s ease, transform 0.15s ease;
  }

  /* ── Integration marquee items smooth press ── */
  .animate-marquee > div:active {
    transform: scale(0.92);
    opacity: 0.8;
    transition: transform 0.12s ease, opacity 0.12s ease;
  }

  /* ── Horizontal scroll pill/chip targets: enlarge hit area ── */
  .overflow-x-auto a,
  .overflow-x-auto button,
  [data-scroll-snap] a,
  [data-scroll-snap] button {
    min-height: 36px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── List item press states (used in industries, nav menus) ── */
  .list-item-interactive:active {
    background: rgba(167, 139, 250, 0.06);
    transform: scale(0.98);
    transition: background 0.1s ease, transform 0.1s ease;
  }

  /* CTA pulse removed — static confidence is more trustworthy than pulsing */

  /* ── Bottom sheet modal entrance ── */
  @keyframes mobileSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes mobileSheetFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ── Skeleton loading shimmer speed ── */
  .skeleton {
    animation-duration: 1.2s;
  }

  [data-shimmer] {
    animation-duration: 1.5s;
  }

  /* Page fade-in removed — content should appear instantly for trust */

  /* ── Section divider mobile ── */
  .section-divider {
    margin: 0 1rem;
  }

  /* ── Badge touch-friendly sizing ── */
  .badge {
    padding: 0.4375rem 0.875rem;
    font-size: 0.6875rem;
    min-height: 28px;
  }

  /* ── Category filter pills — larger touch area ── */
  .animate-marquee + * a,
  [class*="px-3"][class*="py-1"]:not(.badge) {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Icon button sizing ── */
  button.icon-button,
  [aria-label="Close"],
  [aria-label="close"] {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Smooth overscroll behavior ── */
  body {
    overscroll-behavior-y: contain;
  }

  /* ── Image anti-aliasing on retina ── */
  img {
    image-rendering: -webkit-optimize-contrast;
  }

  /* ── Fix for Safari 100vh ── */
  .min-h-screen {
    min-height: 100dvh;
  }

  /* ── Ensure readable text contrast on small screens ── */
  .text-on-surface-variant {
    letter-spacing: 0.005em;
  }

  /* ── Case study stat rows: stack long rows on tiny screens (Phase 6.2) ── */
  .case-stat-row {
    align-items: flex-start;
    gap: 0.25rem;
  }
  .case-stat-row.is-long {
    flex-direction: column;
  }
  .case-stat-value {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  /* ── Testimonial density (Phase 6.5) ── */
  .testimonial-card {
    padding: 1.25rem;
    border-left-width: 2px;
  }
  .testimonial-card blockquote,
  .testimonial-card p {
    line-height: 1.65;
  }
}

/* ═══════════════════════════════════════════════
   SMALL MOBILE (< 375px) — EXTRA SMALL SCREENS
   ═══════════════════════════════════════════════ */

@media (max-width: 374.98px) {
  h1 { font-size: 1.625rem !important; }
  h2 { font-size: 1.375rem !important; }

  .btn-primary, .btn-secondary {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .hero-heading {
    font-size: 1.875rem !important;
  }

  .section-heading {
    font-size: 1.375rem !important;
  }

  nav[aria-label="Mobile navigation"] .material-symbols-outlined,
  nav.fixed .material-symbols-outlined:not(.mobile-nav-icon) {
    font-size: 18px !important;
  }

  nav[aria-label="Mobile navigation"] span:not(.material-symbols-outlined),
  nav[aria-label="Mobile navigation"] .mobile-nav-label {
    font-size: 0.75rem !important;
    letter-spacing: -0.01em !important;
  }

  .stat-card .stat-value {
    font-size: 12px !important;
  }

  /* Tighter layout for iPhone SE / small phones */
  section {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-viz {
    min-height: 280px;
  }

  .hiw-viz {
    min-height: 230px;
  }

  #hiw-step-2.hiw-viz,
  #hiw-step-3.hiw-viz {
    aspect-ratio: auto !important;
  }

  #hiw-step-2.hiw-viz {
    min-height: clamp(380px, 100vw, 460px);
  }

  #hiw-step-3.hiw-viz {
    min-height: clamp(400px, 110vw, 500px);
  }

  .badge {
    padding: 0.375rem 0.625rem;
    font-size: 0.625rem;
  }

  .roi-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════
   LANDSCAPE MOBILE — Prevent short-height issues
   ═══════════════════════════════════════════════ */

@media (max-width: 767.98px) and (orientation: landscape) {
  nav[aria-label="Mobile navigation"],
  nav.fixed.bottom-0 {
    height: 3rem;
  }

  nav[aria-label="Mobile navigation"] a,
  nav.fixed.bottom-0 a {
    flex-direction: row;
    gap: 0.25rem;
  }

  header.fixed {
    height: 2.75rem !important;
  }

  /* Reduce hero vertical space in landscape */
  .hero-viz {
    aspect-ratio: 16 / 9 !important;
    min-height: 180px;
  }

  .hiw-viz {
    aspect-ratio: 16 / 9 !important;
    min-height: 180px;
  }

  #hiw-step-2.hiw-viz,
  #hiw-step-3.hiw-viz {
    aspect-ratio: auto !important;
  }

  #hiw-step-2.hiw-viz {
    min-height: clamp(380px, 80vh, 460px);
  }

  #hiw-step-3.hiw-viz {
    min-height: clamp(400px, 85vh, 500px);
  }
}

/* ═══════════════════════════════════════════════
   HIGH-DPI / RETINA — Crisp rendering
   ═══════════════════════════════════════════════ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .border {
    border-width: 0.5px;
  }

  .border-outline-variant,
  [class*="border-outline"] {
    border-color: rgba(39, 39, 42, 0.6);
  }

  /* Sharper text rendering on retina */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ═══════════════════════════════════════════════
   TOUCH DEVICE — Hover effect adjustments
   ═══════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
  /* Disable hover-dependent effects on touch */
  [data-hover-lift]:hover {
    transform: none !important;
    box-shadow: 0 4px 12px -4px rgba(167, 139, 250, 0.08) !important;
  }

  [data-hover-glow]:hover {
    box-shadow: none !important;
  }

  [data-hover-shine]::before {
    display: none;
  }

  [data-hover-scale]:hover {
    transform: none !important;
  }

  .card:hover, .card-interactive:hover {
    box-shadow: none !important;
    border-color: rgba(167, 139, 250, 0.15);
  }

  .nav-link:hover {
    background: transparent;
  }

  /* Active states instead of hover */
  [data-hover-lift]:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease;
  }

  .btn-primary:active {
    transform: scale(0.96) !important;
  }

  .btn-secondary:active {
    transform: scale(0.96) !important;
  }

  /* Faster tap feedback */
  .btn-primary, .btn-secondary, a, button,
  .card-interactive, .product-tile {
    -webkit-tap-highlight-color: rgba(167, 139, 250, 0.08);
    touch-action: manipulation;
  }

  /* Smooth press ripple effect for primary actions */
  [data-ripple]:active .ripple {
    background: rgba(167, 139, 250, 0.15);
  }
}

/* ═══════════════════════════════════════════════
   HOW IT WORKS — Mobile-only optimizations
   (visuals stay identical to desktop; only rendering
    and interaction behaviour changes)
   ═══════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  /* Scene 1: Enlarge invisible hit area for tool cards */
  .hiw-tool {
    /* native 44×44 minimum via expanded rect in JS */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Scene 1: filter rendering kept, but composites smarter */
  .hiw-viz svg {
    /* ensure the compositor treats the whole SVG as a single layer */
    will-change: auto;
  }

  /* Scene 2 canvas: allow page scroll, capture only node drags */
  .hiw-canvas {
    touch-action: pan-y;
  }

  /* Scene 3: sparkline should never block touch */
  .dm-sparkline {
    pointer-events: none;
  }

  /* Scene 3: pipeline horizontal scroll snap for tiny screens */
  .dm-pipeline {
    scroll-snap-type: x mandatory;
  }
  .dm-stage {
    scroll-snap-align: start;
  }
}

/* ═══════════════════════════════════════════════
   ANIMATIONS — Mobile-specific keyframes
   ═══════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  /* Faster, lighter scroll-reveal on mobile */
  [data-animate="fade-up"] {
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-animate="fade-down"] {
    transform: translate3d(0, -24px, 0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-animate="hero-reveal"] {
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-animate="hero-reveal"].is-visible {
    transform: translate3d(0, 0, 0);
  }

  /* Reduce stagger delay on mobile for snappier feel */
  [data-animate="stagger"] > * {
    transition-duration: 0.4s;
  }

  /* Faster scale-up on mobile */
  [data-animate="scale-up"] {
    transform: scale3d(0.95, 0.95, 1);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Lighter blur-in on mobile */
  [data-animate="blur-in"] {
    filter: blur(4px);
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ═══════════════════════════════════════════════
   MOBILE NAV — compact professional shell
   ═══════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  main {
    padding-bottom: 8rem !important;
  }

  nav[aria-label="Mobile navigation"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 80 !important;
    display: block !important;
    padding: 0 0.4rem calc(env(safe-area-inset-bottom, 0px) + 0.7rem) !important;
    background: linear-gradient(180deg, transparent, rgba(9, 9, 11, 0.86) 38%, rgba(9, 9, 11, 0.98)) !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  nav[aria-label="Mobile navigation"] > div,
  nav[aria-label="Mobile navigation"] .mobile-nav-inner {
    width: min(100%, 27rem) !important;
    height: 4.55rem !important;
    margin: 0 auto !important;
    padding: 0.34rem !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0.18rem !important;
    border: 1px solid rgba(167, 139, 250, 0.16) !important;
    border-radius: 1.35rem !important;
    background:
      linear-gradient(135deg, rgba(24, 23, 29, 0.96), rgba(9, 9, 11, 0.96)),
      radial-gradient(circle at 50% -20%, rgba(167, 139, 250, 0.18), transparent 58%) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    overflow: hidden !important;
  }

  nav[aria-label="Mobile navigation"] a {
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0.34rem 0.12rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.12rem !important;
    border-radius: 1rem !important;
    color: rgba(157, 157, 181, 0.82) !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
  }



  nav[aria-label="Mobile navigation"] a:hover,
  nav[aria-label="Mobile navigation"] a:focus-visible {
    color: #fafafa !important;
    background: rgba(255, 255, 255, 0.035) !important;
  }

  nav[aria-label="Mobile navigation"] a:active {
    transform: translateY(1px) scale(0.97) !important;
  }

  nav[aria-label="Mobile navigation"] a[aria-current="page"],
  nav[aria-label="Mobile navigation"] a.is-active,
  nav[aria-label="Mobile navigation"] a.text-primary {
    color: #fafafa !important;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0.08)) !important;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.22), 0 8px 22px rgba(167, 139, 250, 0.1) !important;
  }



  nav[aria-label="Mobile navigation"] .material-symbols-outlined,
  nav[aria-label="Mobile navigation"] .mobile-nav-icon {
    font-size: 1.14rem !important;
    line-height: 1 !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  nav[aria-label="Mobile navigation"] a[aria-current="page"] .material-symbols-outlined,
  nav[aria-label="Mobile navigation"] a.is-active .material-symbols-outlined {
    transform: translateY(-1px) !important;
  }

  nav[aria-label="Mobile navigation"] span:not(.material-symbols-outlined),
  nav[aria-label="Mobile navigation"] .mobile-nav-label {
    font-size: 0.75rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
  }

  nav[aria-label="Mobile navigation"] a.text-primary::after,
  nav.fixed.bottom-0 a.text-primary::after {
    display: none !important;
  }
}

@media (max-width: 374.98px) {
  nav[aria-label="Mobile navigation"] {
    padding-inline: 0.45rem !important;
  }

  nav[aria-label="Mobile navigation"] > div,
  nav[aria-label="Mobile navigation"] .mobile-nav-inner {
    height: 4.35rem !important;
    border-radius: 1.15rem !important;
    gap: 0.14rem !important;
  }

  nav[aria-label="Mobile navigation"] a {
    border-radius: 0.85rem !important;
    padding-inline: 0.1rem !important;
  }

  nav[aria-label="Mobile navigation"] .material-symbols-outlined,
  nav[aria-label="Mobile navigation"] .mobile-nav-icon {
    font-size: 1.02rem !important;
  }

  nav[aria-label="Mobile navigation"] span:not(.material-symbols-outlined),
  nav[aria-label="Mobile navigation"] .mobile-nav-label {
    font-size: 0.75rem !important;
  }
}

/* prefers-reduced-motion is handled in base.css and animations.css */

/* ═══════════════════════════════════════════════
   PRINT STYLES (override animations.css print)
   ═══════════════════════════════════════════════ */

@media print {
  nav, footer, .fixed {
    position: static !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  * {
    box-shadow: none !important;
  }

  .card, .card-interactive, .glass-panel {
    border: 1px solid #ccc;
    background: #fff;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH — Nit-pick refinements (was mobile-polish.css)
   Merged here for single-file cascade. Rules below override
   the broader mobile rules above via source order within
   the same @layer.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

  /* ── Bottom nav: hardened fixed shell (final override) ── */
  nav[aria-label="Mobile navigation"] {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100%;
    max-width: 100vw;
    z-index: 999 !important;
    transform: translateZ(0);
    background: linear-gradient(180deg, rgba(18, 18, 25, 0.86), rgba(9, 9, 11, 0.98));
    border-top: 1px solid rgba(167, 139, 250, 0.16);
    box-shadow: 0 -18px 40px -28px rgba(167, 139, 250, 0.45), 0 -12px 28px -24px rgba(0, 0, 0, 0.9);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.35rem);
    padding-left: max(env(safe-area-inset-left, 0px), 0px);
    padding-right: max(env(safe-area-inset-right, 0px), 0px);
    isolation: isolate;
  }

  nav[aria-label="Mobile navigation"] > div {
    height: 4rem !important;
    min-height: 4rem !important;
  }

  nav[aria-label="Mobile navigation"] a {
    border-radius: 0.875rem;
  }

  nav[aria-label="Mobile navigation"] a[aria-current="page"],
  nav[aria-label="Mobile navigation"] a.text-primary {
    background: rgba(167, 139, 250, 0.1);
  }

  #currency-mobile-toggle {
    top: 0.75rem;
    right: 0.75rem;
    z-index: 55;
    padding: 0.35rem 0.625rem;
    font-size: 0.6875rem;
    border-radius: 9999px;
    background: rgba(18, 18, 25, 0.88);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(167, 139, 250, 0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  #currency-mobile-toggle:active {
    transform: scale(0.94);
  }

  /* ── Hero section: tighter vertical rhythm ── */
  section[data-particle-mesh] {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  /* ── Hero heading: slightly larger for impact ── */
  .text-4xl.font-bold.tracking-tight.font-headline,
  h1.text-4xl {
    font-size: 2.125rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  /* ── Hero subtext: better line-height ── */
  .text-base.text-on-surface-variant.max-w-2xl {
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  /* ── CTA buttons: consistent width in flex-col stacks ── */
  .flex.flex-col .btn-primary,
  .flex.flex-col .btn-secondary {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-size: 0.9375rem;
    border-radius: 0.75rem;
  }

  /* ── Value Prop section: tighter top/bottom ── */
  section.py-16.bg-surface {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* ── Section badge pill spacing ── */
  .inline-flex.items-center.gap-2.px-3.py-1.rounded-full {
    margin-bottom: 1.25rem;
    animation: none !important;
  }

  /* ── Section headings: balanced wrapping ── */
  h2.text-2xl {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  /* ── Feature cards: consistent internal spacing ── */
  .card.p-6 {
    padding: 1.25rem;
  }

  .card .feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
  }

  .card .feature-icon .material-symbols-outlined {
    font-size: 1.25rem;
  }

  .card h3.text-lg {
    font-size: 1.0625rem;
    margin-bottom: 0.375rem;
  }

  .card p.text-on-surface-variant {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  /* ── Stats bar: tighter, crisper ── */
  section.border-y .grid.grid-cols-2 {
    gap: 0.5rem 1rem;
  }

  .stat-item {
    padding: 0.625rem 0.375rem;
  }

  .stat-item .text-3xl {
    font-size: 1.75rem;
    line-height: 1.1;
  }

  .stat-item .text-xs {
    font-size: 0.6875rem;
    line-height: 1.35;
    margin-top: 0.125rem;
  }

  /* ── Integration marquee: tighter vertical ── */
  section.py-12.border-y.overflow-hidden {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  section.py-12.border-y .text-xs.uppercase {
    margin-bottom: 0.5rem;
    font-size: 0.625rem;
  }

  .integration-item {
    gap: 0.25rem;
  }

  .integration-item svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  /* ── How It Works: better mobile layout ── */
  section.py-12.relative.overflow-hidden {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .space-y-10 {
    gap: 2rem;
  }

  /* Step number badges: slightly smaller */
  .inline-flex.items-center.justify-center.w-10.h-10.rounded-full {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* Step titles */
  h3.text-2xl.font-semibold {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  /* Step descriptions */
  .text-on-surface-variant.mb-6.leading-relaxed {
    font-size: 0.8125rem;
    line-height: 1.65;
    margin-bottom: 0.75rem;
  }

  /* ── Check list items: tighter ── */
  .space-y-2 li {
    gap: 0.375rem;
  }

  .space-y-2 li .text-sm {
    font-size: 0.8125rem;
  }

  .space-y-2 li .material-symbols-outlined {
    font-size: 0.875rem;
  }

  /* ── Social proof: compact ── */
  section.py-10.flex.flex-col.items-center {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 0.75rem;
  }

  /* ── Trust Protocol teaser: tighter card ── */
  section.py-16.border-t {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .card.p-6.rounded-2xl {
    padding: 1.25rem;
  }

  .card.p-6.rounded-2xl h3 {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .card.p-6.rounded-2xl p {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  .card.p-6.rounded-2xl .btn-secondary {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    padding: 0.625rem 1rem;
    width: 100%;
    justify-content: center;
  }

  /* ── Final CTA: reduce excessive vertical space ── */
  section.py-20.relative.overflow-hidden {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  section.py-20 h2.text-3xl {
    font-size: 1.625rem;
    line-height: 1.18;
    margin-bottom: 0.75rem;
  }

  section.py-20 p.text-base {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
  }

  /* ── Mobile footer: refined spacing ── */
  footer.md\:hidden {
    padding-top: 1.5rem;
    padding-bottom: 7rem;
    gap: 0.75rem;
  }

  footer.md\:hidden .text-lg {
    font-size: 1.125rem;
  }

  footer.md\:hidden .flex.gap-6 {
    gap: 1.25rem;
  }

  footer.md\:hidden .footer-link {
    font-size: 0.75rem;
  }

  /* ── Better image containment ── */
  img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
  }

  /* ── Max-width containers: consistent edge padding ── */
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  /* ── Paragraph global: prevent orphan words ── */
  p {
    text-wrap: pretty;
    line-height: 1.6;
  }

  /* ── Link underline offset for readability ── */
  a {
    text-underline-offset: 3px;
  }

  /* ── Better border rendering on retina ── */
  .border,
  .border-t,
  .border-b,
  .border-y {
    border-width: 0.5px;
  }

  /* Page fade-in removed — content should appear immediately. */

  /* ── Products page mobile ── */
  #main-content-mobile {
    padding-top: 0.5rem;
    padding-bottom: 5rem;
  }

  #main-content-mobile .space-y-12 {
    gap: 2rem;
  }

  .product-tile {
    min-height: 3.5rem;
    -webkit-tap-highlight-color: transparent;
  }

  .product-tile p.text-sm {
    font-size: 0.8125rem;
    line-height: 1.55;
  }

  .product-tile .text-sm.text-on-surface-variant {
    font-size: 0.8125rem;
    line-height: 1.55;
  }

  /* ── About page ── */
  .about-hero-image {
    height: 240px !important;
  }

  /* ── About page mobile ── */
  main.md\:hidden .card.p-6 {
    padding: 1.125rem;
  }

  main.md\:hidden .card h4 {
    font-size: 1rem;
  }

  main.md\:hidden .card p.text-sm {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  /* ── Industries page mobile ── */
  .category-filter-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.875rem;
    min-height: 2.25rem;
  }

  .industry-filter-row {
    gap: 0.5rem !important;
    padding-bottom: 0.25rem !important;
  }

  .industry-card {
    border-radius: 0.75rem !important;
  }

  #industries-container-mobile .industry-card {
    display: flex;
    flex-direction: column;
  }
  #industries-container-mobile .industry-card > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #industries-container-mobile .industry-card p.line-clamp-2 {
    flex: 1;
  }
  #industries-container-mobile .industry-card > div:last-child {
    padding: 0.875rem !important;
  }

  .industry-featured-card {
    padding: 1.25rem !important;
    border-radius: 0.875rem !important;
  }
  .industry-featured-card .w-12 {
    width: 2.75rem !important;
    height: 2.75rem !important;
    border-radius: 0.625rem !important;
  }
  .industry-featured-card .material-symbols-outlined.text-2xl {
    font-size: 1.125rem !important;
  }
  .industry-featured-card h3 {
    font-size: 1.125rem !important;
    line-height: 1.2 !important;
  }
  .industry-featured-card p.text-xs {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
  }
  .industry-featured-card p.text-sm {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
  }
  .industry-featured-card .grid.grid-cols-3 > div {
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
  }
  .industry-featured-card .grid.grid-cols-3 .text-sm {
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
  }
  .industry-featured-card .grid.grid-cols-3 .text-\[9px\] {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }
  .industry-featured-card .flex.items-center.gap-1.mt-3 {
    font-size: 0.8125rem !important;
    margin-top: 0.75rem !important;
  }

  /* ── Pricing page mobile ── */
  .metric-card {
    padding: 0.875rem;
  }

  .chart-container {
    height: 180px;
  }

  /* ── Form pages (contact, book-demo) ── */
  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
  }

  .form-label {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }

  /* ── Glass panels: disable costly blur on mobile ── */
  .glass,
  .glass-panel,
  .glass-light {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 18, 25, 0.92);
  }

  /* ── Badge sizing ── */
  .badge {
    font-size: 0.75rem;
    padding: 0.3125rem 0.625rem;
  }

  /* ── Hero image on product/about pages ── */
  .aspect-\[4\/5\] {
    aspect-ratio: 3 / 4;
  }

  /* ── Trust page value list ── */
  ul.space-y-6 li {
    gap: 0.625rem;
  }

  ul.space-y-6 li h4 {
    font-size: 1rem;
  }

  ul.space-y-6 li p {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  /* ── Legal pages mobile ── */
  .legal-content {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .legal-content h2 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .legal-content h3 {
    font-size: 1.0625rem;
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
  }

  .legal-content p,
  .legal-content li {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .legal-page-main {
    padding-bottom: 10rem !important;
  }

  /* ── Glow dots: reduce visual noise ── */
  .glow-dot {
    width: 6px;
    height: 6px;
  }

  /* ── Scroll progress bar: thinner on mobile ── */
  #scroll-progress {
    height: 1.5px;
  }

  /* ── Nav progress: ensure visibility above bottom nav ── */
  #nav-progress {
    height: 2px;
  }
}

/* ── Extra small screens (<375px) polish ── */
@media (max-width: 374.98px) {
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .card.p-6 {
    padding: 1rem;
  }

  .stat-item .text-3xl {
    font-size: 1.5rem;
  }

  h2.text-2xl {
    font-size: 1.375rem;
  }

  section.py-20 h2.text-3xl {
    font-size: 1.5rem;
  }

  nav[aria-label="Mobile navigation"] span:not(.material-symbols-outlined),
  nav[aria-label="Mobile navigation"] .mobile-nav-label {
    font-size: 0.75rem !important;
  }
}

/* ── Final mobile UI safeguards ── */
@media (max-width: 767.98px) {
  body {
    animation: none !important;
  }

  nav[aria-label="Mobile navigation"] span:not(.material-symbols-outlined),
  nav[aria-label="Mobile navigation"] .mobile-nav-label {
    font-size: 0.75rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
  }

  #currency-mobile-toggle {
    font-size: 0.75rem !important;
  }

  footer.md\:hidden {
    margin-bottom: 5.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .hero-viz text,
  .hiw-viz text,
  .hero-viz *,
  .hero-viz [class*="label"],
  .hero-viz [class*="sub"],
  .hiw-viz [class*="label"],
  .hiw-viz [class*="sub"],
  .dl-root [class*="label"],
  .dl-root [class*="sub"],
  .dm-mobile-root [class*="label"],
  .dm-mobile-root [class*="sub"],
  .dl-mobile-root [class*="label"],
  .dl-mobile-root [class*="sub"] {
  font-size: 12px !important;
  line-height: 1.25 !important;
  }

  .text-\[9px\],
  .text-\[10px\],
  .text-\[11px\],
  .text-xs.uppercase,
  #industries-container-mobile .industry-card p,
  #industries-container-mobile .industry-card .flex.items-center.gap-2.flex-wrap > *,
  #industry-modal .modal-content .text-\[10px\],
  #industry-modal .modal-content .flex.flex-wrap.gap-1\.5 > *,
  #industry-modal .modal-content .flex.flex-wrap.gap-2 > * {
    font-size: 0.75rem !important;
    line-height: 1.25 !important;
  }

  .overflow-x-auto,
  [data-scroll-snap] {
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
  }

  .overflow-x-auto::-webkit-scrollbar,
  [data-scroll-snap]::-webkit-scrollbar {
    display: block !important;
    height: 0.35rem !important;
  }

  #category-filters {
    flex-wrap: wrap !important;
  }

  .absolute.-top-8.-right-8.w-24,
  .absolute.top-0.right-0.w-64 {
    top: 0 !important;
    right: 0 !important;
    width: 4rem !important;
    height: 4rem !important;
  }

  /* ── Marquee: static on mobile to avoid off-viewport children ── */
  .animate-marquee {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  .animate-marquee > .card.inline-flex {
    white-space: normal;
    min-width: 0;
    max-width: 100%;
  }
  .animate-marquee > .card.inline-flex span {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ── Mobile category filters: wrap instead of scroll ── */
  #mobile-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow: visible;
  }
  #mobile-category-filters .category-filter-btn {
    white-space: normal;
    min-height: 2.5rem;
  }

  /* Sitewide mobile proportion pass */
  h1.page-hero-title {
    font-size: 2.5rem !important;
    line-height: 1.06 !important;
  }

  h1,
  h2,
  h3,
  .font-headline,
  .tracking-tight,
  .tracking-tighter,
  [class*="tracking-["] {
    letter-spacing: 0 !important;
  }

  [data-animate],
  [data-img-reveal],
  [data-text-reveal],
  [data-tilt] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .card,
  .card-interactive,
  .glass-panel,
  .product-tile,
  .status-card,
  .page-cta-card,
  .metric-card,
  .testimonial-card {
    border-radius: 0.75rem !important;
  }

  .card.p-6,
  .card-interactive.p-6,
  .glass-panel.p-6,
  .page-cta-card.p-6 {
    padding: 1.125rem !important;
  }

  .card.p-8,
  .card-interactive.p-8,
  .glass-panel.p-8,
  .page-cta-card.p-8 {
    padding: 1.25rem !important;
  }

  .card p,
  .card-interactive p,
  .glass-panel p,
  .product-tile p,
  .status-card p {
    line-height: 1.6 !important;
  }

  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    min-height: 2.75rem;
    background: rgba(9, 9, 11, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .product-mobile-hero {
    padding-top: 1.25rem !important;
  }

  .product-mobile-hero-title {
    font-size: 2.75rem !important;
    line-height: 1.05 !important;
    margin-bottom: 0.875rem !important;
  }

  .product-mobile-hero-subtitle {
    max-width: 19rem !important;
    margin-bottom: 1rem !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .product-mobile-hero-image {
    aspect-ratio: 16 / 11 !important;
    max-height: 17.5rem !important;
    margin-bottom: 1rem !important;
  }

  .product-mobile-hero .product-page-cta {
    margin-bottom: 1.25rem;
  }

  .product-mobile-section-title {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }

  .product-mobile-main section > .flex.items-center.gap-3 {
    align-items: center !important;
  }

  .product-mobile-flow,
  .product-mobile-benefits,
  .product-mobile-final-card {
    border-radius: 0.75rem !important;
  }

  nav[aria-label="Mobile navigation"] span:not(.material-symbols-outlined),
  nav[aria-label="Mobile navigation"] .mobile-nav-label {
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
  }
}

/* ── Landscape polish ── */
@media (max-width: 767.98px) and (orientation: landscape) {
  section[data-particle-mesh] {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }

  section.py-20.relative.overflow-hidden {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* ── Reduced motion for polish animations ── */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
  }
}

/* ── Page-specific Refinements ── */
@media (max-width: 767.98px) {
  /* Products Data Pipeline */
  .product-mobile-flow-row {
    flex-wrap: nowrap !important;
    width: max-content;
  }
  [aria-label="Data pipeline flow"] > .product-mobile-flow-grid {
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  /* Industries 3-column stats */
  .industry-featured-card .grid.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .industry-featured-card .grid.grid-cols-3 > div:nth-child(3) {
    grid-column: span 2;
  }

  /* Case Studies before/after list icons */
  main.md\:hidden .card li.flex.items-start > .material-symbols-outlined {
    font-size: 1.25rem !important;
  }

  /* Pricing ROI Calculator */
  #roi-calculator-mobile {
    padding-bottom: 6rem !important;
  }

  /* About Core Competencies Alignment */
  main.md\:hidden .about-mobile-section li.flex.items-center,
  main.md\:hidden section ul.space-y-4 li.flex.items-center,
  main.md\:hidden section ul.space-y-2\.5 li.flex.items-center {
    align-items: flex-start !important;
  }
  main.md\:hidden section ul.space-y-4 li.flex.items-center > .material-symbols-outlined,
  main.md\:hidden section ul.space-y-2\.5 li.flex.items-center > .material-symbols-outlined {
    margin-top: 0.125rem;
  }

  /* AI Coach Workshop standalone page */
  .ai-workshop-page main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem) !important;
  }

  .ai-workshop-page nav[aria-label="AI Coach navigation"] .btn-primary {
    padding: 0.6rem 0.8rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .ai-workshop-page h1 {
    font-size: 2.65rem !important;
    line-height: 1.04 !important;
  }

  .workshop-viz {
    min-height: 430px;
    margin-top: 0.75rem;
  }

  .workshop-node {
    min-width: 106px;
    padding: 0.7rem;
    border-radius: 0.8rem;
  }

  .workshop-node strong {
    font-size: 0.76rem;
  }

  .workshop-node small,
  .workshop-viz-bar strong {
    display: none;
  }

  .workshop-node-main {
    min-width: 124px;
    top: 40%;
  }

  .workshop-node.n1 { left: 4%; top: 25%; }
  .workshop-node.n2 { right: 4%; top: 25%; }
  .workshop-node.n3 { left: 4%; bottom: 29%; }
  .workshop-node.n4 { right: 4%; bottom: 29%; }

  .workshop-path {
    opacity: 0.35;
  }

  .workshop-terminal {
    font-size: 0.68rem;
    padding: 0.75rem;
  }

  .brand-pill {
    min-height: 3rem;
    font-size: 0.85rem;
  }

  .workshop-inclusions {
    grid-template-columns: 1fr;
  }

  .workshop-timeline::before {
    left: 1.1rem;
  }

  .timeline-card,
  .timeline-card:nth-child(odd),
  .timeline-card:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 3rem;
  }

  .timeline-card:nth-child(odd) .timeline-marker,
  .timeline-card:nth-child(even) .timeline-marker {
    left: 0;
    right: auto;
  }

  .timeline-card-body {
    padding: 1rem;
  }

  .timeline-top strong {
    font-size: 1rem;
  }

  .timeline-card ul {
    font-size: 0.86rem;
  }

  .pricing-card,
  .value-compare {
    border-radius: 1rem;
  }

  .compare-row,
  .compare-total,
  .compare-pay {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .faq-item summary {
    min-height: 56px;
    padding: 1rem;
  }

  .faq-item p {
    padding: 0 1rem 1rem;
  }

  /* Final shared mobile fit pass */
  .hero-viz {
    aspect-ratio: 16 / 10 !important;
    min-height: clamp(210px, 56vw, 230px) !important;
  }

  #hiw-step-2.hiw-viz,
  #hiw-step-3.hiw-viz {
    aspect-ratio: auto !important;
    min-height: clamp(280px, 78vw, 320px) !important;
  }

  #hiw-step-2 .dl-mobile-root.dl-mobile-story,
  #hiw-step-3 .dm-mobile-root.dm-mobile-story {
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
  }

  nav[aria-label="Mobile navigation"] {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.25rem) !important;
  }

  nav[aria-label="Mobile navigation"] span:not(.material-symbols-outlined),
  nav[aria-label="Mobile navigation"] .mobile-nav-label {
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
  }
}

} /* end @layer mobile */