/* ──────────────────────────────────────────────────────────────────────
   premium-mobile.css — Trillion-dollar polish layer for advai.cloud
   Loaded after design-system.css. Targets mobile premium UX.
   ────────────────────────────────────────────────────────────────────── */

/* ── Root: native feel + theme matching ──────────────────────────────── */
:root {
  color-scheme: dark;                                /* form controls go dark */
  --premium-spring: cubic-bezier(.34, 1.56, .64, 1); /* Apple-style overshoot */
  --premium-ease:   cubic-bezier(.22, 1, .36, 1);    /* sharp out, smooth in */
}

/* Kill iOS blue tap flash, prevent landscape font scaling */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* iOS momentum scroll on overflow regions */
.nsb-messages, .ds-card-grid, [data-scroll] {
  -webkit-overflow-scrolling: touch;
}

/* Disable pull-to-refresh on app-like surfaces (does not affect document scroll) */
body { overscroll-behavior-y: none; }

/* Horizontal safe-area for landscape iPhones with notches */
@supports (padding: max(0px)) {
  .ds-container, .nav, .ds-footer__inner, .header, .topbar {
    padding-left:  max(var(--container-pad, 16px), env(safe-area-inset-left));
    padding-right: max(var(--container-pad, 16px), env(safe-area-inset-right));
  }
}

/* ── Typography: system fallback before Inter loads (FOUT prevention) ── */
body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'SF Pro Display', 'Segoe UI', Roboto, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'ss01';     /* Inter aesthetic tweaks */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Premium tap response (spring scale, not just opacity) ───────────── */
@media (hover: none) and (pointer: coarse) {
  button, a, [role=button], .ds-btn, .pcard-cta, .wizard-option,
  .wizard-size, .nsb-fab, .sticky-cta, .tab-btn {
    transition: transform .15s var(--premium-spring), opacity .12s ease;
    will-change: transform;
  }
  button:active, a:active, [role=button]:active, .ds-btn:active,
  .pcard-cta:active, .wizard-option:active, .wizard-size:active,
  .nsb-fab:active, .sticky-cta:active, .tab-btn:active {
    transform: scale(.96);
    opacity: .85;
  }
  /* The chat FAB gets a tighter scale because it's already small */
  .nsb-fab:active { transform: scale(.92); }
}

/* ── Focus states: visible only on keyboard nav, not on tap ──────────── */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent2, #2dd4bf);
  outline-offset: 2px;
  border-radius: 8px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent2, #2dd4bf);
  outline-offset: 0;
}

/* ── Glassmorphism nav: backdrop-blur on scroll ─────────────────────── */
.nav, header.nav, .header, .topbar {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ── Layout shift prevention (CLS=0) ────────────────────────────────── */
img, iframe, video {
  display: block;
  max-width: 100%;
  height: auto;
}
img:not([width]):not([height]),
iframe:not([width]):not([height]) {
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, .03);
}

/* ── Reduced motion: respect user preference ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .orb, .live-dot, .ticker, .typewriter-cursor { animation: none !important; }
}

/* ── Better text selection color (subtle brand tint) ────────────────── */
::selection {
  background: rgba(45, 212, 191, .25);
  color: inherit;
}

/* ── Scrollbar styling (when visible — desktop fallback) ────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.20); }

/* ── Hide scrollbars on horizontal scroll regions (carousels, ticker) ── */
.ticker-wrapper, [data-hide-scrollbar] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ticker-wrapper::-webkit-scrollbar,
[data-hide-scrollbar]::-webkit-scrollbar { display: none; }

/* ── Form inputs: premium feel ──────────────────────────────────────── */
@media (max-width: 600px) {
  input, textarea, select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 12px;
  }
  /* Number-input spinners off (cleaner) */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
  }
}

/* ── Bottom-aligned primary CTA in thumb zone (mobile only) ─────────── */
@media (max-width: 600px) {
  /* Gentle padding-bottom on body so sticky CTAs don't cover content */
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Ticker hover-pause, premium polish ─────────────────────────────── */
.ticker-wrapper:hover .ticker { animation-play-state: paused; }

/* ── Skeleton shimmer for loading states (utility class) ────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Hero entry animation — subtle fade-up (CLS-safe) ───────────────── */
@media (max-width: 768px) {
  .ds-hero__title, .hero h1, .header h1 {
    opacity: 0;
    animation: fadeup .6s var(--premium-ease) forwards;
  }
  .ds-hero__sub, .hero p, .header p {
    opacity: 0;
    animation: fadeup .6s var(--premium-ease) .1s forwards;
  }
  .ds-hero__cta-pair, .hero-cta-row {
    opacity: 0;
    animation: fadeup .6s var(--premium-ease) .2s forwards;
  }
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pricing card "popular" badge: subtle glow pulse ────────────────── */
.pcard.popular::before, .tier.featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent, #14b8a6), var(--accent2, #2dd4bf));
  z-index: -1;
  opacity: .35;
  filter: blur(20px);
  animation: glowpulse 3s var(--premium-ease) infinite;
}
@keyframes glowpulse {
  0%, 100% { opacity: .25; }
  50%      { opacity: .50; }
}

/* ── Wizard option selected: spring-pop confirmation ────────────────── */
.wizard-option.selected, .wizard-size.selected {
  animation: pop .35s var(--premium-spring);
}
@keyframes pop {
  0%   { transform: scale(.96); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ── Chat FAB: subtle pulse hint on first load (one-shot) ───────────── */
.nsb-fab[data-pulse-once]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent2, #2dd4bf);
  animation: fab-pulse 2s ease-out 1s 2;  /* runs twice, then stops */
  pointer-events: none;
}
@keyframes fab-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.6); opacity: 0;  }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION LAYER (added 2026-05-15)
   Comprehensive fixes for tap targets, viewport overflow, font sizing,
   layout collapse, and iOS-specific quirks across all advai.cloud pages.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Global: prevent horizontal scroll on any page ─────────────────── */
/* Use `clip` not `hidden` — `hidden` auto-cascades overflow-y to `auto`,
   which makes both html AND body scroll containers and DEADLOCKS vertical
   scroll on long pages. `clip` does the same horizontal clip without
   establishing a scroll container. Bug surfaced 2026-05-16 on advai.cloud
   homepage after content grew past viewport. */
html, body { max-width: 100vw; overflow-x: clip; }

/* ── iOS input zoom prevention (font ≥ 16px on focus) ──────────────── */
@media (max-width: 768px) {
  input[type=text], input[type=email], input[type=tel], input[type=number],
  input[type=password], input[type=search], input[type=url], input[type=date],
  textarea, select {
    font-size: 16px !important;
    min-height: 44px;
  }
}

/* ── Tap target minimums (Apple HIG 44×44, MD 48×48) ───────────────── */
@media (max-width: 768px) {
  .ds-btn, .pcard-cta, .sticky-cta, .tab-btn, .wizard-option, .wizard-size,
  .ds-nav__link, .ds-footer__link, .nav-link, .btn, .btn-primary,
  button[type=submit], a.button, .cta-btn, .ent-cta-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Container padding at small viewports ──────────────────────────── */
@media (max-width: 600px) {
  .ds-container, .ax-container, .section-inner, .nav, .ds-footer__inner,
  .header, .topbar { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 380px) {
  .ds-container, .ax-container, .section-inner { padding-left: 14px; padding-right: 14px; }
}

/* ── Hero: cap font sizes on small phones ──────────────────────────── */
@media (max-width: 480px) {
  .ds-hero__title, .ax-hero h1, .page-hero h1, .header h1, h1.hero-title {
    font-size: clamp(1.7rem, 8vw, 2.4rem) !important;
    line-height: 1.12;
    letter-spacing: -.02em;
  }
  .ds-hero__sub, .ax-hero p.sub, .page-hero p, .hero-sub {
    font-size: clamp(.95rem, 4vw, 1.08rem) !important;
    line-height: 1.5;
  }
  .ax-eyebrow, .ds-hero__badge, .section-label, .ds-section-label, .badge {
    font-size: .68rem !important;
    padding: 4px 10px;
  }
  /* Reduce hero top padding so CTA is closer to thumb */
  .ds-hero, .ax-hero, .page-hero { padding-top: 32px !important; padding-bottom: 28px !important; }
}

/* ── Section title cap on small viewports ──────────────────────────── */
@media (max-width: 480px) {
  .ds-section-title, .ax-h2, .section-title, h2.section-title {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.18;
  }
  .ds-section-sub, .ax-sub, .section-sub {
    font-size: .95rem !important;
    line-height: 1.55;
  }
}

/* ── Auto-collapse multi-col grids to single col at <=520px ────────── */
@media (max-width: 520px) {
  .bento, .ax-caps, .ax-uses, .home-grid, .ds-grid, .grid-cards,
  .ds-footer__inner--grid, .trust-grid, .stake-grid, .features-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ── Wide cards span full width on mobile ──────────────────────────── */
@media (max-width: 520px) {
  .bento-card, .ax-cap, .ax-use, .home-card, .ds-card, .pcard, .tier {
    grid-column: 1 / -1 !important;
  }
}

/* ── CTA pair: stack vertically on small viewports ─────────────────── */
@media (max-width: 480px) {
  .ds-hero__cta-pair, .hero-cta-row, .ax-hero__ctas, .btn-row {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .ds-hero__cta-pair > *, .hero-cta-row > *, .ax-hero__ctas > *, .btn-row > * {
    width: 100%;
    text-align: center;
  }
}

/* ── Tables: wrap in horizontal scroll on mobile ───────────────────── */
@media (max-width: 600px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Footer: stack columns at small viewport ───────────────────────── */
@media (max-width: 600px) {
  .ds-footer__inner, .ds-footer__inner--grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 32px 18px !important;
  }
  .ds-footer__col { text-align: left; }
  .ds-footer__heading { margin-bottom: 8px; }
  .ds-footer__link { padding: 8px 0; display: block; }
}

/* ── Reduce card padding at small viewports ────────────────────────── */
@media (max-width: 480px) {
  .bento-card, .ax-cap, .ds-card, .pcard, .case-study,
  .program-card { padding: 20px 18px !important; }
}

/* ── ROI calculator mobile fix ─────────────────────────────────────── */
@media (max-width: 600px) {
  .roi-calc { padding: 18px !important; }
  .roi-calc__hero { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .roi-calc__title { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; }
  .roi-calc__field { margin-bottom: 14px; }
  .roi-calc__sub-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}
@media (max-width: 380px) {
  .roi-calc__sub-grid { grid-template-columns: 1fr !important; }
}

/* ── Wizard cards: full width on mobile ────────────────────────────── */
@media (max-width: 520px) {
  .roi-wizard__grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .roi-wizard__card { padding: 14px 16px !important; }
}

/* ── Nav: ensure mobile menu trigger is tap-friendly ───────────────── */
@media (max-width: 900px) {
  .ds-nav__hamburger, .nav-toggle, .menu-toggle {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ── Sticky CTAs: don't overlap bottom safe area ───────────────────── */
.sticky-cta, .nsb-fab, .floating-cta {
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

/* ── Iframe demos: don't overflow on mobile ────────────────────────── */
@media (max-width: 768px) {
  iframe { max-width: 100%; width: 100%; }
  .ais-demo iframe, .demo-frame iframe { height: 480px; min-height: 320px; }
}

/* ── Code blocks: don't overflow ───────────────────────────────────── */
@media (max-width: 600px) {
  pre, code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
}

/* ── Urgency bar: smaller on mobile ────────────────────────────────── */
@media (max-width: 480px) {
  .urgency-bar { padding: 8px 14px !important; font-size: .72rem !important; }
}

/* ── Reduce hero badge / eyebrow margins on mobile ─────────────────── */
@media (max-width: 480px) {
  .ax-eyebrow, .ds-hero__badge { margin-bottom: 14px !important; }
}

/* ── AIS sidenav: collapsible on mobile (becomes horizontal scroll) ── */
@media (max-width: 900px) {
  .ais-sidenav { position: static !important; max-height: none !important; }
  .ais-sidenav ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
  .ais-sidenav__link { white-space: nowrap; min-width: max-content; padding: 10px 14px; }
}

/* ── Section vertical rhythm: tighter on mobile ────────────────────── */
@media (max-width: 600px) {
  section.ax-section, section.ds-section { padding: 40px 0 !important; }
}

/* ── Tap-friendly accordion / dropdown items ───────────────────────── */
@media (max-width: 600px) {
  details summary, .accordion-item, .faq-item, .ds-nav__dd-trigger { min-height: 44px; padding: 12px 16px; }
}

/* ── Page hero: tighter on phone ───────────────────────────────────── */
@media (max-width: 480px) {
  .page-hero { padding: 48px 18px 28px !important; }
}

/* ── Regional page hero CTAs (.hero-cta) — tap target + full width ── */
@media (max-width: 600px) {
  .hero-cta {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    min-height: 48px !important;
    line-height: 48px !important;
    padding: 0 24px !important;
    box-sizing: border-box;
  }
}

/* ── CTA cards (index.html) — ensure readable on mobile ─────────── */
@media (max-width: 600px) {
  .cta-card { min-height: 80px; padding: 20px 18px !important; }
}

/* ── ROI CTA (finance.html) — full width on mobile ──────────────── */
@media (max-width: 600px) {
  .roi-cta {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    box-sizing: border-box;
    line-height: 1.3 !important;
  }
}

/* ── About page content grids ─────────────────────────────────────── */
@media (max-width: 600px) {
  .about-grid, .stats-grid, .build-grid, .regions-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── Hero padding on small screens ─────────────────────────────────── */
@media (max-width: 480px) {
  .page-hero, .ax-hero, .ais-hero { padding: 56px 16px 40px; }
}

/* ── Footer grid stacking ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .ds-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Media safety ───────────────────────────────────────────────────── */
img, iframe, video { max-width: 100%; height: auto; }

/* ── Focus rings for keyboard / accessibility ───────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}