/* ===================================================================
Lumex marketing polish layer  (loaded only on marketing pages)
- scroll-reveal safety net
- card / tile hover elevation
- reusable matched-icon chips
=================================================================== */

/* Scroll-reveal: never leave content hidden if AOS fails or motion is reduced */
.aos-off [data-aos] { opacity: 1 !important; transform: none !important; }
[data-aos] { will-change: opacity, transform; }

/* ---- Hover elevation for cards & tiles ---- */
.card, .quote-card, .risk-tile, .logo-pill, .tier-card {
  transition: transform .18s ease, border-color .18s ease;
}
.card:not(.card-compact):hover,
.quote-card:hover, .risk-tile:hover, .tier-card:hover {
  transform: translateY(-3px);
}
a.card { text-decoration: none; }
a.card:hover { border-color: var(--color-primary); }
.logo-pill:hover { color: var(--color-text); border-color: var(--color-primary); transform: translateY(-2px); }

/* Keep the fake product screenshot's inner cards static */
.mock .card:hover { transform: none; }

/* Animated arrow nudge on link buttons */
.btn:hover [data-lucide="arrow-right"] { transform: translateX(2px); }
.btn [data-lucide="arrow-right"] { transition: transform .15s ease; }

/* ===================================================================
ajuni-matched motion: subtle scroll-reveal + per-letter hero heading.
Reveal uses an 8–10px rise on the ease-out-quart curve (cubic-bezier
0.22,1,0.36,1), not AOS's default 100px slide. Flat, restrained.
=================================================================== */

/* Soften AOS fade-up to ajuni's subtle 10px rise */
[data-aos="fade-up"] { transform: translate3d(0, 10px, 0); }

/* Per-letter animated heading (hero h1) */
.animated-heading-word { display: inline-block; white-space: nowrap; }
.animated-heading-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--aj-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
  transform .55s var(--aj-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: var(--aj-d, 0ms);
}
.animated-heading.is-visible .animated-heading-letter { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .animated-heading-letter { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Reusable matched-icon chips ---- */
.stat-ic {
  width: 36px; height: 36px; border-radius: 10px; margin: 0 auto 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.tile-ic {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.q-mark { color: #c7d2fe; }
.cat-ic {
  width: 26px; height: 26px; border-radius: 7px; margin-right: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
  vertical-align: middle;
}
.step-ic {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.case-ic {
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .card, .quote-card, .risk-tile, .logo-pill, .tier-card { transition: none; }
  .card:hover, .quote-card:hover, .risk-tile:hover, .tier-card:hover, .logo-pill:hover { transform: none; }
}

/* =====================================================================
Mobile responsiveness
===================================================================== */

/* ---- Mobile nav drawer (markup injected by enhance.js) ---- */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 8px; flex-shrink: 0;
  border: 1px solid var(--color-border); border-radius: 9px;
  background: white; color: var(--color-text); cursor: pointer;
}
.nav-drawer {
  display: none; flex-direction: column; gap: 4px;
  padding: 10px 18px 18px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
}
.nav-drawer.open { display: flex; }
.nav-drawer-link {
  padding: 12px; border-radius: 8px;
  font-size: 15px; font-weight: 500;
  color: var(--color-text-muted); text-decoration: none;
}
.nav-drawer-link:hover { background: var(--color-bg-muted); color: var(--color-text); }
.nav-drawer .btn { margin-top: 6px; justify-content: center; width: 100%; }
.nav-drawer .aj-btn { margin-top: 6px; justify-content: center; width: 100%; }
@media (min-width: 768px) { .nav-toggle, .nav-drawer { display: none !important; } }
@media (max-width: 767px) { .nav-toggle { display: inline-flex; } }

/* ---- Stack inline-grid mock layouts on small screens ---- */
@media (max-width: 760px) {
  .stack-sm { grid-template-columns: 1fr !important; }
  .stack-sm > * { min-height: 0 !important; }
}

/* ---- Wide comparison table scrolls horizontally ---- */
.vs-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) { .vs-table table { min-width: 660px; } }

/* ---- Tighter spacing on phones ---- */
@media (max-width: 640px) {
  .section { padding-block: 30px; padding-inline: 14px; }
  .footer { padding: 44px 20px 24px; }
  .marketing-nav-inner { padding: 12px 18px; }
  .lead { font-size: 16px; }
  .hero-eyebrow { margin-bottom: 18px; }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
/* @media (max-width: 400px) { .footer-grid { grid-template-columns: 1fr; } } */