/* BuyerSignal Landing Page Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&display=swap');

:root {
  --font-poppins: 'Poppins', system-ui, -apple-system, sans-serif;
  --white-surface: #ffffff;
  --blue-tint: #edf4ff;
  --light-surface: #f8fafc;
  --amber-accent: #fab013;
  --body-text: #1e293b;
  --dark-navy: #080e22;
  --deep-navy: #0f172a;
  --muted-text: #334155;
  --subtle-text: #475569;
  --brand-primary: #146EF5;
  --brand-hover: #0e59cb;
  --soft-border: #cbd5e1;
  --footer-muted: #94a3b8;
  --footer-muted-strong: #cbd5e1;
  --footer-border: rgba(255, 255, 255, 0.1);
  --footer-border-strong: var(--dark-navy);
  --footer-background: var(--deep-navy);
  --footer-text: var(--white-surface);
  --footer-button-background: rgba(255, 255, 255, 0.1);
  --footer-button-background-hover: rgba(255, 255, 255, 0.2);
  --footer-padding-block: clamp(3rem, 6vw, 4.5rem);
  --footer-padding-inline: clamp(1rem, 4vw, 2rem);
  --footer-content-width: 80rem;
  --footer-grid-gap: clamp(2rem, 5vw, 4rem);
  --footer-brand-column: 1.2fr;
  --footer-nav-column: 0.8fr;
  --footer-meta-column: 1.2fr;
  --footer-brand-min-width: 14rem;
  --footer-nav-min-width: 12rem;
  --footer-meta-min-width: 17rem;
  --footer-brand-gap: 0.75rem;
  --footer-logo-size: 2.25rem;
  --footer-logo-icon-size: 1.25rem;
  --footer-radius: 0.625rem;
  --footer-brand-copy-gap: 0.125rem;
  --footer-nav-gap: 0.5rem;
  --footer-nav-offset: 0.875rem;
  --footer-meta-gap: 0.375rem;
  --footer-button-margin-top: 0.75rem;
  --footer-button-padding-block: 0.625rem;
  --footer-button-padding-inline: 1rem;
  --footer-disclaimer-margin-top: 2rem;
  --footer-disclaimer-padding-top: 1.5rem;
  --footer-disclaimer-gap: 0.75rem;
  --footer-disclaimer-heading-offset: 0.75rem;
  --footer-brand-tracking: -0.02em;
  --footer-heading-tracking: 0.08em;
  --footer-meta-line-height: 1.5;
  --footer-disclaimer-line-height: 1.7;
  --footer-transition: 0.2s ease;
  --payment-methods-card-padding: 0.75rem;
  --payment-methods-card-radius: 0.625rem;
  --payment-methods-image-radius: 0.25rem;
  --payment-methods-card-shadow: 0 10px 24px rgba(8, 14, 34, 0.16);
}

.payment-methods {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.payment-methods__image {
  display: block;
  width: 100%;
  height: auto;
}

.payment-methods--dark-card {
  padding: var(--payment-methods-card-padding);
  background-color: var(--deep-navy);
  border: 1px solid var(--footer-border);
  border-radius: var(--payment-methods-card-radius);
  box-shadow: var(--payment-methods-card-shadow);
}

.payment-methods--dark-card .payment-methods__image {
  border-radius: var(--payment-methods-image-radius);
}

body {
  font-family: var(--font-poppins);
  color: var(--body-text);
  background-color: var(--white-surface);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-poppins);
  letter-spacing: -0.02em;
}

.shadow-card-default {
  box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.08);
}

.shadow-card-deep {
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 45, 0.09);
}

.shadow-card-deeper {
  box-shadow: 0px 40px 40px 0px rgba(10, 0, 45, 0.09);
}

.shadow-card-subtle {
  box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.06);
}

.bg-dot-pattern {
  background-image: radial-gradient(rgba(20, 110, 245, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-grid-pattern {
  background-size: 30px 30px;
  background-image: 
    linear-gradient(to right, rgba(226, 232, 240, 0.7) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.7) 1px, transparent 1px);
}

.bg-mesh-gradient {
  background: radial-gradient(circle at 10% 20%, rgba(237, 244, 255, 0.9) 0%, rgba(255, 255, 255, 0) 40%),
              radial-gradient(circle at 90% 80%, rgba(20, 110, 245, 0.08) 0%, rgba(255, 255, 255, 0) 50%),
              radial-gradient(circle at 50% 50%, rgba(245, 247, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.bg-dark-mesh {
  background: radial-gradient(circle at 15% 20%, rgba(20, 110, 245, 0.3) 0%, transparent 45%),
              radial-gradient(circle at 85% 80%, rgba(250, 176, 19, 0.15) 0%, transparent 50%),
              #080e22;
}

/* Organic Weightless Float */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(0.5deg); }
}

.animate-float {
  animation: float 8s ease-in-out infinite;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Modal Fade-In & Pop */
.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================================
   Ultra-Smooth Premium SaaS Scroll Reveal & Micro-Interactions
   ========================================================================== */

/* Base Reveal Hidden States (1.2s Slow Silk Glide) */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0 !important;
  will-change: opacity, transform;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.reveal {
  transform: translateY(28px) !important;
}

.reveal-left {
  transform: translateX(-32px) !important;
}

.reveal-right {
  transform: translateX(32px) !important;
}

.reveal-scale {
  transform: scale(0.94) !important;
}

/* Revealed Active State */
.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Granular Stagger Delays (Enforced against utility overwriting) */
.delay-75  { transition-delay: 75ms !important; }
.delay-100 { transition-delay: 100ms !important; }
.delay-150 { transition-delay: 150ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-225 { transition-delay: 225ms !important; }
.delay-250 { transition-delay: 250ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-375 { transition-delay: 375ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-450 { transition-delay: 450ms !important; }
.delay-500 { transition-delay: 500ms !important; }
.delay-600 { transition-delay: 600ms !important; }

/* Interactive Card Hover Lifter */
.hover-card-lift {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
}

.hover-card-lift:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 40px -10px rgba(20, 110, 245, 0.16) !important;
}

/* Global Frameless SaaS Card Rule */
.saas-card,
.card-frameless {
  border: none !important;
}

/* Lush Ambient Glowing CTA Pulse */
@keyframes ctaPulseGlow {
  0%, 100% {
    box-shadow: 0 8px 20px -4px rgba(255, 93, 41, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 16px 36px 0px rgba(255, 93, 41, 0.55);
    transform: scale(1.015);
  }
}

.animate-cta-glow {
  animation: ctaPulseGlow 4s infinite ease-in-out;
}

/* Subtle Intent Flame Pulse */
@keyframes flamePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.88;
  }
}

.animate-flame {
  animation: flamePulse 2.8s infinite ease-in-out;
}

/* Fluid Tab & Pane Crossfade Animation */
@keyframes tabFadeSwap {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-tab-swap {
  animation: tabFadeSwap 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Smooth Accordion Height Grid Transition */
.faq-accordion-item {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-accordion-item:hover {
  border-color: #cbd5e1;
}

.faq-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-content-wrapper.open {
  grid-template-rows: 1fr;
}

.faq-content-inner {
  overflow: hidden;
}

/* Toast Social Proof Transition Classes */
.toast-notification {
  transform: translateY(28px) scale(0.94);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.6s;
}

.toast-notification.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

/* Modal Smooth Backdrop & Card Pop Transitions */
.modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.open .modal-container {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Site Footer */
.site-footer {
  padding: var(--footer-padding-block) var(--footer-padding-inline);
  color: var(--footer-text);
  background-color: var(--footer-background);
  border-top: 1px solid var(--footer-border-strong);
}

.site-footer__inner {
  width: min(100%, var(--footer-content-width));
  margin-inline: auto;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(var(--footer-brand-min-width), var(--footer-brand-column)) minmax(var(--footer-nav-min-width), var(--footer-nav-column)) minmax(var(--footer-meta-min-width), var(--footer-meta-column));
  gap: var(--footer-grid-gap);
  align-items: start;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--footer-brand-gap);
  width: fit-content;
  color: inherit;
  text-decoration: none;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--footer-logo-size);
  height: var(--footer-logo-size);
  color: var(--footer-text);
  background-color: var(--brand-primary);
  border-radius: var(--footer-radius);
}

.site-footer__logo-icon {
  width: var(--footer-logo-icon-size);
  height: var(--footer-logo-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.site-footer__brand-copy {
  display: flex;
  flex-direction: column;
  gap: var(--footer-brand-copy-gap);
}

.site-footer__brand-name {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--footer-brand-tracking);
}

.site-footer__brand-name span {
  color: var(--brand-primary);
}

.site-footer__brand-tagline,
.site-footer__meta p,
.site-footer__disclaimer {
  color: var(--footer-muted);
}

.site-footer__brand-tagline {
  font-size: var(--text-xs);
}

.site-footer__nav h2,
.site-footer__disclaimer h2 {
  margin: 0;
  color: var(--footer-muted-strong);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--footer-heading-tracking);
  text-transform: uppercase;
}

.site-footer__nav ul {
  display: grid;
  gap: var(--footer-nav-gap);
  margin: var(--footer-nav-offset) 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  color: var(--footer-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--footer-transition);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--footer-text);
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-meta-gap);
}

.site-footer__meta p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--footer-meta-line-height);
}

.site-footer__meta p + p {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.site-footer__meta button {
  display: inline-flex;
  align-items: center;
  gap: var(--footer-nav-gap);
  margin-top: var(--footer-button-margin-top);
  padding: var(--footer-button-padding-block) var(--footer-button-padding-inline);
  color: var(--footer-text);
  background-color: var(--footer-button-background);
  border: 0;
  border-radius: var(--footer-radius);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  transition: background-color var(--footer-transition);
}

.site-footer__meta button:hover,
.site-footer__meta button:focus-visible {
  background-color: var(--footer-button-background-hover);
}

.site-footer__meta button svg {
  width: var(--text-base);
  height: var(--text-base);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.site-footer__disclaimer {
  display: grid;
  gap: var(--footer-disclaimer-gap);
  margin-top: var(--footer-disclaimer-margin-top);
  padding-top: var(--footer-disclaimer-padding-top);
  border-top: 1px solid var(--footer-border);
  font-size: var(--text-xs);
  line-height: var(--footer-disclaimer-line-height);
}

.site-footer__disclaimer h2:not(:first-child) {
  margin-top: var(--footer-disclaimer-heading-offset);
}

.site-footer__disclaimer p {
  margin: 0;
}

@media (max-width: 48rem) {
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 32rem) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

/* Button Active Press Micro-Feedback */
button, .btn-interactive {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

button:active, .btn-interactive:active {
  transform: scale(0.97) !important;
}

/* Accessibility: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .animate-float,
  .animate-cta-glow,
  .animate-flame,
  .animate-pulse,
  .animate-tab-swap {
    animation: none !important;
  }
}