:root {
    --accent1: #b36bf0;
    /* purple from logo */
    --accent2: #ff5a66;
    /* coral/red from logo */
    --muted: #6b7280;
    --bg: #f8fafc;
}

/* overall page background gradient using brand tints */
body {
    background: linear-gradient(180deg, rgba(179, 107, 240, 0.03), rgba(255, 90, 102, 0.02));
}

.font-poppins {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
}

/* small design helpers */
.btn-accent {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    color: white
}

.logo-mark {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800
}

.font-poppins {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
}

/* small design helpers */
.btn-accent {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    color: white
}

.logo-mark {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 800
}

.con-btn {
    width: 150px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* --- Social proof styles --- */
#social-proof .stat {
    background: transparent;
}

#social-proof .stat .font-extrabold {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--accent1);
}

/* Testimonials */
#testimonials {
    min-height: 220px;
}

.testi-track {
    display: flex;
    gap: 16px;
    transition: transform 400ms ease;
}

.testi-item {
    min-width: 100%;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
}

/* small fixes for responsive partners grid */
.partners-grid img {
    filter: grayscale(0.02);
    opacity: 0.95;
    padding: 6px;
    background: transparent;
    border-radius: 6px;
}

@media (min-width: 1024px) {
    .testi-item {
        min-width: 100%;
    }

    /* keep single card visible on large screens */
}

/* =========================
   UX Animations & Transitions
   ========================= */

/* -- Motion reduction support -- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* -- Fade / slide reveal utility -- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms cubic-bezier(.16,.84,.3,1), transform 520ms cubic-bezier(.16,.84,.3,1);
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* stagger helpers for children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(10px);
}
.reveal-stagger.revealed > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 480ms ease, transform 480ms ease;
}
.reveal-stagger.revealed > *:nth-child(1){ transition-delay: 0.05s; }
.reveal-stagger.revealed > *:nth-child(2){ transition-delay: 0.12s; }
.reveal-stagger.revealed > *:nth-child(3){ transition-delay: 0.22s; }
.reveal-stagger.revealed > *:nth-child(4){ transition-delay: 0.3s; }

/* -- Hero button micro-interactions -- */
.btn-accent {
  transition: transform 220ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms ease;
  will-change: transform;
}
.btn-accent:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(179,107,240,0.12);
}

/* ghost/outline buttons */
a.border {
  transition: transform 200ms ease, background-color 240ms ease, color 240ms ease;
}
a.border:hover { transform: translateY(-3px); color: var(--accent1); }

/* -- Card hover lift and subtle glow -- */
.p-6.border, .bg-white.rounded-lg.border {
  transition: transform 280ms cubic-bezier(.16,.84,.3,1), box-shadow 280ms ease, border-color 280ms ease;
  will-change: transform, box-shadow;
}
.p-6.border:hover, .bg-white.rounded-lg.border:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.06);
  border-color: rgba(179,107,240,0.12);
}

/* -- Testimonials: soft fade + slide + scaled avatars -- */
.testi-item {
  transition: transform 420ms cubic-bezier(.22,.9,.28,1), opacity 420ms ease;
  will-change: transform, opacity;
  opacity: 0; /* default hidden, JS will add .active */
  transform: translateY(8px) scale(0.995);
}
.testi-item.active { opacity: 1; transform: translateY(0) scale(1); }

/* Add soft crossfade when sliding the track */
.testi-track {
  transition: transform 520ms cubic-bezier(.16,.84,.3,1);
  will-change: transform;
}

/* Prev/Next buttons hover */
#prevTesti, #nextTesti {
  transition: background 180ms ease, transform 180ms ease;
}
#prevTesti:hover, #nextTesti:hover { transform: translateY(-2px); }

/* -- Partner logos: subtle scale & saturation on hover -- */
.partners-grid img {
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
  will-change: transform, filter;
  transform-origin: center;
}
.partners-grid img:hover {
  transform: translateY(-6px) scale(1.03);
  filter: grayscale(0) saturate(1.05);
  opacity: 1;
}

/* -- Counter digit smoothness -- */
#social-proof .stat .font-extrabold {
  transition: color 300ms ease;
  text-wrap: balance;
}

/* small helper for soft floating accent elements (optional use) */
.float-y {
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}