/* Befixs — ui.css
 * Only what the vendored libraries need (AOS, Alpine, Splide, CountUp) + the few
 * transitions the Alpine components rely on. Load AFTER styles.css, aos.css and
 * splide.min.css. Uses the tokens declared in styles.css (never redefines them);
 * every var() carries a literal fallback so this file also works on its own.
 *
 * Gate classes on <html>:
 *   .js          set by the inline <head> snippet (already in index.html)
 *   .no-aos / .no-alpine / .no-splide   set by ui.js when a library failed to load
 */

/* ------------------------------------------------------------------ *
 * 1. Alpine
 * ------------------------------------------------------------------ */
html.js:not(.no-alpine) [x-cloak] { display: none !important; }

/* ------------------------------------------------------------------ *
 * 2. AOS — custom animation + "never stuck invisible" guards
 * ------------------------------------------------------------------ */

/* Custom animation "fade-up-blur" (befixs.com default reveal).
   Name starts with "fade", so AOS's own [data-aos^=fade] rule supplies opacity 0 -> 1. */
[data-aos="fade-up-blur"][data-aos="fade-up-blur"] {
  transform: translate3d(0, 40px, 0);
  filter: blur(8px);
  transition-property: opacity, transform, filter;
}
[data-aos="fade-up-blur"][data-aos="fade-up-blur"].aos-animate { filter: none; }

/* AOS leaves transform: translateZ(0) on revealed elements, which turns them into a
   containing block for position: fixed children and a stacking context. End on "none". */
[data-aos^="fade"][data-aos^="fade"].aos-animate { transform: none; }

/* AOS 2.3.4 maps "ease-out-quart" to cubic-bezier(.25,.46,.45,.94) (same as befixs.com).
   For the mathematically true curve from styles.css, uncomment:
   body[data-aos-easing="ease-out-quart"] [data-aos] { transition-timing-function: var(--ease-out-quart, cubic-bezier(.165, .84, .44, 1)); } */

/* aos.css hides [data-aos] unconditionally. Show everything when there is no JS,
   when AOS did not load, and on paper. */
html:not(.js) [data-aos],
html.no-aos [data-aos] {
  opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
}
@media print {
  [data-aos] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ *
 * 3. CountUp
 * ------------------------------------------------------------------ */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ *
 * 4. Audience switch (segmented control with sliding thumb) + panel cross-fade
 *    Add the modifier class: <div class="aud-switch aud-switch--slide">
 * ------------------------------------------------------------------ */
.aud-switch--slide {
  position: relative; isolation: isolate;
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.aud-switch--slide::before {
  content: ""; position: absolute; z-index: -1;
  top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: 999px; background: var(--c-primary, #1941af);
  transition: transform .3s var(--ease-out-quart, cubic-bezier(.165, .84, .44, 1));
}
html[data-audience="business"] .aud-switch--slide::before { transform: translateX(100%); }
.aud-switch--slide button { white-space: nowrap; }
.aud-switch--slide button[aria-pressed="true"] { background: transparent; }

/* ui.js adds .aud-switching to <html> for ~350ms after a switch */
html.aud-switching [data-for]:not([data-aos]) {
  animation: ui-aud-in .3s var(--ease-out-quart, cubic-bezier(.165, .84, .44, 1));
}
@keyframes ui-aud-in { from { opacity: 0; transform: translateY(12px); } }

/* ------------------------------------------------------------------ *
 * 5. Accordion (x-collapse)
 *    x-collapse animates height, so vertical padding must live on the children.
 * ------------------------------------------------------------------ */
.faq__a[x-collapse] { padding: 0; }
.faq__a[x-collapse] > * { padding: 0 20px; }
.faq__a[x-collapse] > :last-child { padding-bottom: 18px; }

/* ------------------------------------------------------------------ *
 * 6. Mobile drawer (x-show + x-trap)
 * ------------------------------------------------------------------ */
.ui-drawer__backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(21, 31, 48, .55);
}
.ui-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(86vw, 340px); padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 6px;
  background: var(--c-white, #fff); box-shadow: var(--shadow-md, 0 10px 30px rgba(21, 31, 48, .1));
  overflow-y: auto; overscroll-behavior: contain;
}
.ui-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ui-drawer__head img { height: 40px; width: auto; }
.ui-drawer__nav { display: flex; flex-direction: column; }
.ui-drawer__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 12px; border-radius: 10px;
  color: var(--c-text, #2c4367); font-weight: 500; text-decoration: none;
}
.ui-drawer__nav a:hover { background: var(--c-bg-soft, #f7f8fc); color: var(--c-primary, #1941af); }
.ui-drawer__foot { margin-top: auto; display: grid; gap: 10px; padding-top: 16px; }
/* x-transition classes */
.ui-t { transition: opacity .3s ease, transform .3s var(--ease-out-quart, cubic-bezier(.165, .84, .44, 1)); }
.ui-t-fade { opacity: 0; }
.ui-t-right { transform: translateX(100%); }
@media (min-width: 1024px) { .ui-drawer, .ui-drawer__backdrop { display: none !important; } }

/* ------------------------------------------------------------------ *
 * 7. Wizard (multi-step form)
 * ------------------------------------------------------------------ */
.ui-wizard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-weight: 600; color: var(--c-navy, #151f30); }
.ui-wizard__head small { font-weight: 500; color: var(--c-text-3, #5268b5); }
.ui-wizard__bar { height: 6px; margin-bottom: 20px; border-radius: 999px; background: var(--c-border, #dde3f0); overflow: hidden; }
.ui-wizard__bar > span {
  display: block; height: 100%; border-radius: inherit; background: var(--c-primary, #1941af);
  transition: width .4s var(--ease-out-quart, cubic-bezier(.165, .84, .44, 1));
}
/* A step becoming visible (x-show: display none -> block) restarts this animation */
.ui-wizard [data-step] { animation: ui-step-next .35s var(--ease-out-quart, cubic-bezier(.165, .84, .44, 1)); }
.ui-wizard[data-dir="back"] [data-step] { animation-name: ui-step-back; }
@keyframes ui-step-next { from { opacity: 0; transform: translateX(24px); } }
@keyframes ui-step-back { from { opacity: 0; transform: translateX(-24px); } }
.ui-wizard [data-step-title]:focus { outline: none; }
.ui-wizard__error { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff1eb; color: #b8360a; font-weight: 500; }
.ui-wizard__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.ui-wizard__nav .btn { flex: 0 1 auto; }

/* ------------------------------------------------------------------ *
 * 8. Toast (clipboard feedback)
 * ------------------------------------------------------------------ */
.ui-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 300;
  max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px;
  background: var(--c-navy, #151f30); color: var(--c-white, #fff); font-weight: 500; text-align: center;
  box-shadow: var(--shadow-md, 0 10px 30px rgba(21, 31, 48, .1));
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
  transition: opacity .3s ease, transform .3s var(--ease-out-quart, cubic-bezier(.165, .84, .44, 1)), visibility 0s .3s;
  pointer-events: none;
}
.ui-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (max-width: 767px) { .ui-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } } /* clears .mobile-bar */

/* ------------------------------------------------------------------ *
 * 9. Splide — brand theme + fallbacks
 * ------------------------------------------------------------------ */
/* splide CSS sets .splide { visibility: hidden } until mounted */
html:not(.js) .splide, html.no-splide .splide { visibility: visible; }
html:not(.js) .splide__list, html.no-splide .splide__list { flex-wrap: wrap; gap: 16px; }

.splide__arrow {
  width: 44px; height: 44px; opacity: 1;
  background: var(--c-white, #fff); border: 1px solid var(--c-border, #dde3f0);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(21, 31, 48, .06));
  transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}
.splide__arrow svg { fill: var(--c-primary, #1941af); width: 1em; height: 1em; transition: fill .3s ease-in-out; }
.splide__arrow:hover:not(:disabled) { opacity: 1; background: var(--c-primary, #1941af); border-color: var(--c-primary, #1941af); }
.splide__arrow:hover:not(:disabled) svg { fill: var(--c-white, #fff); }
.splide__arrow:disabled { opacity: .35; }
.splide__arrow:focus-visible, .splide__pagination__page:focus-visible,
.splide.is-focus-in .splide__arrow:focus, .splide.is-focus-in .splide__pagination__page:focus,
.splide__slide:focus-visible, .splide.is-focus-in .splide__slide:focus {
  outline: 3px solid var(--c-accent, #ff5b1f); outline-offset: 2px;
}
.splide__pagination { position: static; margin-top: 18px; padding: 0; gap: 4px; }
.splide__pagination__page {
  width: 10px; height: 10px; margin: 4px; opacity: 1;
  background: var(--c-border, #dde3f0);
  transition: background-color .3s ease-in-out, transform .3s ease-in-out;
}
.splide__pagination__page.is-active { background: var(--c-primary, #1941af); transform: scale(1.3); }
.section--dark .splide__pagination__page { background: var(--c-dark-border, rgba(255, 255, 255, .16)); }
.section--dark .splide__pagination__page.is-active { background: var(--c-accent, #ff5b1f); }

/* Testimonials: slider below 768px, plain 2-column grid above (Splide "destroy" breakpoint) */
[data-slider="reviews"] .splide__slide > * { height: 100%; }
[data-slider="reviews"].is-initialized:not(.is-active) .splide__list,
html:not(.js) [data-slider="reviews"] .splide__list,
html.no-splide [data-slider="reviews"] .splide__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
@media (max-width: 767px) {
  html:not(.js) [data-slider="reviews"] .splide__list,
  html.no-splide [data-slider="reviews"] .splide__list { grid-template-columns: 1fr; }
}

/* Swipeable card rows (.swipe = Splide "cards" preset): slider below 768px, the original grid above.
   The grid element itself is the .splide__list, so its grid rules from styles.css apply once Splide is destroyed. */
.swipe:not(.is-active) .splide__track { overflow: visible; } /* desktop: keep card shadows / hover lift unclipped */
/* splide.min.css turns a destroyed list into display:block; hand it back to the grid classes */
.swipe.is-initialized:not(.is-active) .splide__list { display: grid; }
.swipe.is-active .splide__list { display: flex; gap: 0; max-width: none; }
.swipe.is-active .splide__track { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 767px) {
  .swipe, [data-slider="reviews"] { margin-right: calc(var(--gutter, 16px) * -1); } /* next card runs to the screen edge */
  .swipe .splide__pagination, [data-slider="reviews"] .splide__pagination { margin-top: 8px; padding-right: var(--gutter, 16px); }
}
html:not(.js) .swipe .splide__track, html.no-splide .swipe .splide__track { overflow: visible; }
/* tablet: keep the single-column package cards centred (splide.min.css forces margin: 0 on the list) */
.swipe:not(.is-active) .splide__list.card-grid--3 { margin-left: auto !important; margin-right: auto !important; }

/* .swipe--arrows: previous / next buttons on the same row as the dots, under the cards */
.swipe--arrows .splide__pagination { min-height: 44px; align-items: center; }
.swipe--arrows .splide__arrow { top: auto; bottom: 0; transform: none; }
.swipe--arrows .splide__arrow--prev { left: 0; }
.swipe--arrows .splide__arrow--next { right: var(--gutter, 16px); }
.swipe--arrows .splide__arrow--prev svg { transform: scaleX(-1); }

/* Client logo marquee (autoWidth slides) */
[data-slider="logos"] .splide__slide img { height: 92px; width: auto; max-width: none; }
@media (max-width: 767px) { [data-slider="logos"] .splide__slide img { height: 60px; } }
html:not(.js) [data-slider="logos"] .splide__slide img,
html.no-splide [data-slider="logos"] .splide__slide img { height: auto; max-width: 100%; }

/* ------------------------------------------------------------------ *
 * 10. Reduced motion — everything visible immediately, nothing moves
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  html.aud-switching [data-for], .ui-wizard [data-step] { animation: none !important; }
  .aud-switch--slide::before, .ui-wizard__bar > span, .ui-toast, .ui-t,
  .splide__arrow, .splide__arrow svg, .splide__pagination__page { transition: none !important; }
}