/* ==========================================================================
  Premium Polish Layer — Bill-o-Bill marketing site
  Loaded after styles.css on: index, about, features, contact, faq.
  Scope: preloader, shared final-CTA rules (dedup'd from page-local <style>
  blocks), and small global consistency/motion polish. No color or font
  values introduced beyond the existing brand tokens in styles.css :root.
  ========================================================================== */

/* --------------------------------------------------------------------------
  1. Preloader
  Markup lives in components/preloader.php. JS driver already exists in
  assets/js/gsapAnimation.js (loader()/animateBars()) — it expects
  .preloader, .inner-bar (6 of them) and animates the --preloader-clip
  custom property to reveal the page.
  -------------------------------------------------------------------------- */
@property --preloader-clip {
 syntax: '<percentage>';
 inherits: true;
 initial-value: 0%;
}

.preloader {
 position: fixed;
 inset: 0;
 z-index: 100000;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 background:
  radial-gradient(60% 50% at 50% 42%, rgba(3, 201, 136, 0.16), transparent 70%),
  var(--indigo-deep);
 --preloader-clip: 0%;
 clip-path: inset(0 0 var(--preloader-clip) 0);
}

/* Infinite scrolling-keyword marquee — dark-bg twin of the hero's
  .hero-word-bg (index.php), so the preloader visually continues into the
  hero instead of looking like a separate loading screen. */
.preloader-word-bg {
 position: absolute;
 inset: 0;
 z-index: 0;
 overflow: hidden;
 pointer-events: none;
}
.preloader-word-track {
 position: absolute;
 left: -20vw;
 width: max-content;
 white-space: nowrap;
 font-family: 'Inter', sans-serif;
 font-weight: 800;
 font-size: 42px;
 letter-spacing: 0.08em;
 color: var(--white);
 opacity: 0.07;
 transform: rotate(-8deg);
 animation: preloaderWordScroll 34s linear infinite;
}
.preloader-word-track span { margin-right: 72px; }
.preloader-word-track.track-alt {
 animation-duration: 44s;
 animation-direction: reverse;
}
@keyframes preloaderWordScroll {
 from { transform: rotate(-8deg) translateX(0); }
 to  { transform: rotate(-8deg) translateX(-50%); }
}
@media (max-width: 767px) {
 .preloader-word-track { font-size: 24px; }
 .preloader-word-track span { margin-right: 40px; }
}

.preloader-inner {
 position: relative;
 z-index: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 28px;
 animation: preloaderMarkIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes preloaderMarkIn {
 from { opacity: 0; transform: translateY(10px) scale(0.97); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}

.preloader-mark {
 font-family: 'Manrope', sans-serif;
 font-weight: 700;
 font-size: 1.6rem;
 letter-spacing: -0.01em;
 color: var(--white);
 display: flex;
 align-items: center;
 gap: 12px;
}

.preloader-mark .dot {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: var(--green-ai);
 box-shadow: 0 0 14px var(--green-ai);
 animation: preloaderDotPulse 1.1s ease-in-out infinite;
}

@keyframes preloaderDotPulse {
 0%, 100% { transform: scale(1); opacity: 0.7; }
 50% { transform: scale(1.5); opacity: 1; }
}

/* Six .inner-bar segments (driven by gsapAnimation.js) rendered edge-to-edge
  so they read as one continuous progress line, not separate dashes. */
.preloader-bars {
 display: flex;
 width: 240px;
 height: 3px;
 border-radius: 3px;
 overflow: hidden;
 background: rgba(255, 255, 255, 0.14);
}

.preloader-bars .bar-track {
 flex: 1;
 height: 100%;
}

.preloader-bars .inner-bar {
 display: block;
 height: 100%;
 width: 0%;
 background: var(--green-ai);
 box-shadow: 0 0 8px var(--green-ai);
}

@media (prefers-reduced-motion: reduce) {
 .preloader-mark .dot,
 .preloader-word-track { animation: none; }
 .preloader-inner { animation: none; }
}

/* --------------------------------------------------------------------------
  2. Shared Final-CTA rules
  Was copy-pasted (with drift) inside a local <style> tag in index.php,
  about.php, features.php and contact.php. Canonical version lives here;
  pages keep only their per-instance inline padding/copy.
  -------------------------------------------------------------------------- */
@keyframes circuitPulse {
 0% { stroke-dashoffset: 420; opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; }
 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes glowPulse {
 0%, 100% { box-shadow: 0 4px 14px rgba(3, 201, 136, 0.2); }
 50% { box-shadow: 0 6px 18px rgba(3, 201, 136, 0.3); }
}

.btn-glow-pulse {
 animation: glowPulse 4s infinite ease-in-out;
}

.section-final-cta .tf-btn:hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 8px 24px rgba(3, 201, 136, 0.3) !important;
}

.section-final-cta .tf-btn-2:hover {
 background: var(--mint-soft) !important;
 border-color: var(--brand) !important;
 color: var(--indigo-deep) !important;
 transform: translateY(-2px);
}

@media (max-width: 767px) {
 .section-final-cta {
  padding: 80px 20px 100px !important;
  border-top-left-radius: 40px !important;
  border-top-right-radius: 40px !important;
 }
 .cta-title { font-size: 32px !important; }
 .cta-btns { gap: 16px !important; }
 /* Matches original unscoped rule from the page-local <style> blocks this
   replaces — kept global (not section-scoped) to preserve prior rendering
   of any other .tf-btn/.tf-btn-2 instance on these pages at this width. */
 .tf-btn, .tf-btn-2 {
  width: 100%;
  padding: 18px 30px !important;
 }
 .cta-product-hint { display: none; }
}

/* --------------------------------------------------------------------------
  3. Global consistency polish
  -------------------------------------------------------------------------- */
::selection {
 background: var(--green-ai);
 color: var(--white);
}

:focus-visible {
 outline: 2px solid var(--green-ai);
 outline-offset: 2px;
}

/* Custom scrollbar — brand colored, matches premium feel site-wide */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--neutral-100); }
::-webkit-scrollbar-thumb {
 background: var(--indigo-tint);
 border-radius: 8px;
 border: 2px solid var(--neutral-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--green-ai); }
html { scrollbar-color: var(--indigo-tint) var(--neutral-100); scrollbar-width: thin; }

/* Consistent hover lift for feature/pricing/trust cards across all pages */
.feature-power-card,
.pricing-card,
.trust-card,
.process-card {
 transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-power-card:hover,
.pricing-card:hover,
.trust-card:hover,
.process-card:hover {
 transform: translateY(-6px);
}

/* Footer: subtle premium finish (no structural/content change) */
.footer-minimal {
 border-top: 1px solid var(--neutral-200);
 background: var(--neutral-50);
}
.footer-minimal .footer-icon-logo img {
 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-minimal .footer-icon-logo img:hover {
 transform: scale(1.03);
}
.footer-copyright-minimal a {
 transition: color 0.25s ease;
}
.footer-copyright-minimal a:hover {
 color: var(--green-ai) !important;
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
 }
}

/* --------------------------------------------------------------------------
  4. Mobile layout guards
  -------------------------------------------------------------------------- */
/* Bootstrap .g-5 gutters (-1.5rem row margins) exceed the container's
  0.75rem padding on phones, bleeding every such row 12px past the viewport. */
@media (max-width: 575.98px) {
 .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
 .row.g-5, .row.gy-5 { --bs-gutter-y: 2rem; }
}
/* Safety net for decorative absolutely-positioned glows/blobs. `clip` (not
  `hidden`) avoids creating a scroll container, so position:sticky still works. */
html { overflow-x: hidden; overflow-x: clip; } /* hidden = fallback for iOS Safari < 16 */
img, video { max-width: 100%; }
h1, h2, h3, .display-5, .display-6 { overflow-wrap: break-word; }
/* Pulse dot sits in flex rows everywhere — never let flex squash it into adjacent text. */
.bob-pulse-dot { flex-shrink: 0; display: inline-block; }