/* ============================================================
   CaseLift · Premium finishing layer
   Loaded AFTER each page's inline styles so equal-specificity
   rules here win. Pure polish: depth, texture, motion finesse.
   Safe to remove: pages fully function without this file.
   ============================================================ */

/* ---------- Global finish ---------- */
::selection { background: rgba(37, 99, 235, 0.22); color: inherit; }
.sec-dark ::selection, .hero ::selection, footer ::selection { background: rgba(6, 182, 212, 0.35); color: #fff; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #06B6D4; outline-offset: 3px; border-radius: 6px;
}

html { scrollbar-color: rgba(100, 116, 139, 0.45) transparent; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.4); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.65); border: 3px solid transparent; background-clip: content-box; }

/* ---------- Scroll progress (injected by premium.js into the fixed nav; unique clp- prefix, pages own the cl- namespace) ---------- */
.clp-bar {
  position: absolute; top: 0; left: 0; height: 2.5px; width: 100%;
  margin: 0;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #2563EB, #06B6D4);
  z-index: 20; pointer-events: none;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.55);
}
.clp-bar--viewport { position: fixed; z-index: 2000; }

/* ---------- Nav: equal spacing for all menu items ---------- */
.nav-prod { gap: 32px; }

/* ---------- Film grain (injected by premium.js) ---------- */
.cl-grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 1998; opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reveal upgrade: depth-of-field entrance ---------- */
.reveal, .reveal-left, .reveal-right {
  filter: blur(10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  will-change: opacity, transform, filter;
}
.reveal.in, .reveal-left.in, .reveal-right.in { filter: none; will-change: auto; }

/* ---------- Buttons: sheen sweep + press feel ---------- */
.btn { position: relative; overflow: hidden; transform: translateZ(0); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.1s; }
.btn-brand::after, .btn-recall::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-20deg); transition: left 0.7s var(--ease); pointer-events: none;
}
.btn-brand:hover::after, .btn-recall:hover::after { left: 130%; }

/* ---------- Cursor spotlight (span.cl-spot injected by premium.js) ---------- */
.cl-spot {
  position: absolute !important; inset: 0; border-radius: inherit;
  opacity: 0; transition: opacity 0.45s var(--ease);
  pointer-events: none; z-index: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 235, 0.09), transparent 65%);
}
.cl-spot.on { opacity: 1; }
.roi-card .cl-spot, .price-card.featured .cl-spot, .tier--featured .cl-spot, .cc-card .cl-spot {
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 208, 230, 0.10), transparent 65%);
  z-index: 2;
}

/* ---------- Hero headline: masked word rise ---------- */
.cl-wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.13em; margin-bottom: -0.13em; }
.cl-w { display: inline-block; transform: translateY(115%); animation: clWordUp 0.9s var(--ease) forwards; animation-delay: calc(0.12s + var(--wi, 0) * 0.05s); }
@keyframes clWordUp { to { transform: translateY(0); } }

/* Gradient text: no shimmer/transform on background-clip:text spans — Safari
   paints animated clipped-text gradients partially cut off. Fade in place. */
.cl-acc-fade { opacity: 0; animation: clAccFade 0.9s var(--ease) forwards; animation-delay: calc(0.12s + var(--wi, 0) * 0.05s); }
@keyframes clAccFade { to { opacity: 1; } }

/* ---------- Hero mockup: perspective tilt stage ---------- */
.mockup-wrap { perspective: 1400px; }
.mockup { transform-style: preserve-3d; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }

/* ---------- FAQ: smooth accordion (driven by premium.js) ---------- */
.faq-item .faq-a { overflow: hidden; }
.faq-item summary { transition: color 0.25s var(--ease); }
.faq-item summary:hover { color: var(--brand); }

/* ---------- Compact PMS strip (product pages) ---------- */
.intg-slim {
  max-width: 1040px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 18px 36px; padding: 26px 32px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 12px 34px -18px rgba(15, 23, 42, 0.18);
}
.intg-slim-label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); white-space: nowrap; }
.intg-slim img { height: 28px; width: auto; display: block; }
.intg-slim-more { font-size: 14px; font-weight: 600; color: var(--gray); white-space: nowrap; }

/* ---------- Integration logos: quiet to alive ---------- */
#integrations img { filter: grayscale(1) opacity(0.62); transition: filter 0.45s var(--ease), transform 0.45s var(--ease); }
#integrations img:hover { filter: grayscale(0) opacity(1); transform: translateY(-4px) scale(1.04); }

/* ---------- Footer links: micro slide ---------- */
.foot-col a { transition: color 0.25s var(--ease), transform 0.25s var(--ease); }
.foot-col a:hover { transform: translateX(3px); }

/* Fix: current-page nav label was ink-on-dark (invisible) before scroll */
.nav-links a.link.current { color: #fff; }
nav.scrolled .nav-links a.link.current { color: var(--ink); }

/* ---------- Nav: crisper glass (light pages; .nav-dark pages keep their own) ---------- */
nav.scrolled:not(.nav-dark) { background: rgba(255, 255, 255, 0.72); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.07), 0 12px 32px -18px rgba(15, 23, 42, 0.18); }

/* ---------- Reduced motion: calm everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .cl-w { animation: none; transform: none; }
  .cl-acc-fade { animation: none; opacity: 1; }
  .btn-brand::after, .btn-recall::after { display: none; }
  .cl-spot { display: none; }
  .reveal, .reveal-left, .reveal-right { filter: none; transition-duration: 0.01s; }
  .clp-bar { display: none; }
}

/* Touch devices: no hover-dependent effects */
@media (hover: none) {
  .cl-spot { display: none; }
  #integrations img { filter: none; }
}