/* ============================================
   index.css — Landing page specific styles
   ============================================ */

/* ── Hero section master orchestration ──── */
.hero-section {
  background: linear-gradient(175deg, #FAFAFA 0%, #F5F0F8 40%, #FFF5FB 70%, #FAFAFA 100%);
  min-height: 100vh;
}

/* Animated mesh gradient background */
.hero-mesh-bg {
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(254,123,205,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(214,74,158,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(255,200,60,0.03) 0%, transparent 60%);
  animation: meshShift 12s ease-in-out infinite alternate;
}
@keyframes meshShift {
  0%   { transform: scale(1) translate(0, 0); }
  33%  { transform: scale(1.05) translate(-2%, 1%); }
  66%  { transform: scale(0.98) translate(1%, -1%); }
  100% { transform: scale(1.03) translate(-1%, 2%); }
}

/* Morphing blob shapes */
.hero-blob {
  border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
  filter: blur(80px);
  animation: blobMorph 18s ease-in-out infinite alternate;
}
.hero-blob--1 {
  background: rgba(254,123,205,0.08);
  animation-duration: 18s;
}
.hero-blob--2 {
  background: rgba(214,74,158,0.06);
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}
.hero-blob--3 {
  background: rgba(255,210,100,0.06);
  animation-duration: 15s;
  animation-delay: -5s;
}
@keyframes blobMorph {
  0%   { border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; transform: translate(0, 0) rotate(0deg); }
  25%  { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; transform: translate(5%, -3%) rotate(5deg); }
  50%  { border-radius: 45% 55% 60% 40% / 60% 45% 55% 45%; transform: translate(-3%, 5%) rotate(-3deg); }
  75%  { border-radius: 60% 40% 45% 55% / 40% 60% 40% 60%; transform: translate(2%, 2%) rotate(2deg); }
  100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: translate(-2%, -3%) rotate(-5deg); }
}

/* ── Caption bar entrance ─────────────── */
.hero-caption-bar {
  opacity: 0;
  animation: heroSlideDown 0.6s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-caption-pill {
  animation: heroPillPop 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  transform: scale(0.85);
}
.hero-caption-divider {
  animation: heroFadeIn 0.4s 0.5s ease forwards;
  opacity: 0;
}
.hero-caption-text {
  animation: heroFadeIn 0.5s 0.6s ease forwards;
  opacity: 0;
}

@keyframes heroSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroPillPop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Headline lines: staggered reveal ──── */
.hero-line {
  opacity: 0;
  transform: translateY(30px) skewY(1.5deg);
  animation: heroLineReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-line--1 { animation-delay: 0.2s; }
.hero-line--2 { animation-delay: 0.4s; }
.hero-line--3 { animation-delay: 0.6s; }

@keyframes heroLineReveal {
  to { opacity: 1; transform: translateY(0) skewY(0deg); }
}

/* ── Rotating word typewriter cursor ───── */
.hero-rotating-word {
  border-right: 2px solid #FE7BCD;
  padding-right: 4px;
  animation: heroCursorBlink 0.8s step-end infinite;
}
@keyframes heroCursorBlink {
  0%, 100% { border-color: #FE7BCD; }
  50% { border-color: transparent; }
}

/* ── Hero hand-drawn scribble underline ── */
.hero-scribble path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: scribbleDraw 1s 1.2s ease forwards;
}
@keyframes scribbleDraw {
  to { stroke-dashoffset: 0; }
}

/* ── Word-by-word intro reveal ─────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: heroWordPop 0.35s ease forwards;
  margin-right: 0.25em;
}

@keyframes heroWordPop {
  to { opacity: 1; transform: translateY(0); }
}

/* ── CTA row entrance ──────────────────── */
.hero-cta-row {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeUp 0.7s 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Button shine sweep effect */
.hero-btn-shine {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.25) 45%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.25) 55%,
    transparent 70%
  );
  transform: translateX(-150%);
  animation: heroShineSweep 3s 2.5s ease-in-out infinite;
}
@keyframes heroShineSweep {
  0%   { transform: translateX(-150%); }
  30%  { transform: translateX(150%); }
  100% { transform: translateX(150%); }
}

/* ── Trust row entrance ────────────────── */
.hero-trust-row {
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeUp 0.6s 2.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-avatar {
  opacity: 0;
  transform: scale(0.7);
  animation: heroAvatarPop 0.4s 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.hero-avatar:nth-child(2) { animation-delay: 2.5s; }
.hero-avatar:nth-child(3) { animation-delay: 2.6s; }

@keyframes heroAvatarPop {
  to { opacity: 1; transform: scale(1); }
}

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Bento dashboard ───────────────────── */
.hero-bento-glow {
  animation: glowPulse 4s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.04); }
}

/* Hero cards — slide up + fade in staggered */
.hero-card {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  animation: heroCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-card:nth-child(1) { animation-delay: 0.8s; }
.hero-card:nth-child(2) { animation-delay: 1.0s; }
.hero-card:nth-child(3) { animation-delay: 1.2s; }

@keyframes heroCardReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bar chart grow animation */
.hero-bar {
  height: 0 !important;
  transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-bar.grown {
  /* height set by JS from data-h */
}

/* Live dot pulse */
.hero-pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.6); }
}

/* ── Scroll indicator ──────────────────── */
.hero-scroll-hint {
  opacity: 0;
  animation: heroFadeIn 0.6s 3s ease forwards;
}

/* ── Logo marquee slider ──────────────── */
.logo-slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Edge fade overlays */
.logo-fade-left,
.logo-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 10;
  pointer-events: none;
}
.logo-fade-left  { left: 0;  background: linear-gradient(to right, #020810, transparent); }
.logo-fade-right { right: 0; background: linear-gradient(to left,  #020810, transparent); }

/* Scrolling track */
.logo-track {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.logo-track:hover {
  animation-play-state: paused;
}

/* Individual framed chip */
.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
.logo-chip:hover {
  border-color: rgba(254,123,205,0.45);
  color: #FE7BCD;
  box-shadow: 0 4px 18px rgba(254,123,205,0.15);
  transform: translateY(-2px);
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Pipeline flow — scroll reveal ────── */
.pipeline-step {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.pipeline-step.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Mobile: connector lines between steps */
@media (max-width: 767px) {
  .pipeline-step + .pipeline-step {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px dashed rgba(254, 123, 205, 0.2);
  }
}

/* ── Stat counter animation ──────────── */
.stat-counter {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-counter.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.stat-counter:nth-child(2) { transition-delay: 0.1s; }
.stat-counter:nth-child(3) { transition-delay: 0.2s; }

/* ── Testimonial cards — scroll reveal ── */
.testimonial-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.testimonial-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.testimonial-card:nth-child(2) { transition-delay: 0.10s; }
.testimonial-card:nth-child(3) { transition-delay: 0.20s; }
.testimonial-card:nth-child(4) { transition-delay: 0.30s; }
/* Hover lift */
.testimonial-card {
  will-change: transform, box-shadow;
}
.testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(254,123,205,0.12);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Benefit cards — scroll reveal ────── */
.benefit-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, box-shadow;
}
.benefit-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.benefit-card:nth-child(2) { transition-delay: 0.10s; }
.benefit-card:nth-child(3) { transition-delay: 0.20s; }
.benefit-card:nth-child(4) { transition-delay: 0.30s; }
/* Hover lift */
.benefit-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.30), 0 0 0 1px rgba(254,123,205,0.12);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Solutions section card reveal ──────── */
.solutions-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding-bottom: 0.35rem;
  /* hide scrollbar */
  scrollbar-width: none;
}
.solutions-grid::-webkit-scrollbar { display: none; }

.solutions-grid .solutions-card {
  flex: 0 0 85vw;
  max-width: 85vw;
  scroll-snap-align: start;
}

/* Dot indicators */
.solutions-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 0.35rem;
}
.solutions-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.solutions-dots button.active {
  background: var(--color-primary, #D64A9E);
  transform: scale(1.25);
}

@media (min-width: 768px) {
  .solutions-grid {
    display: grid;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .solutions-grid .solutions-card {
    flex: none;
    max-width: none;
  }
  .solutions-dots { display: none; }
}

.solutions-card {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, box-shadow;
}
.solutions-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.solutions-card:nth-child(2) { transition-delay: 0.08s; }
.solutions-card:nth-child(3) { transition-delay: 0.16s; }
.solutions-card:nth-child(4) { transition-delay: 0.24s; }
.solutions-card:nth-child(5) { transition-delay: 0.32s; }
.solutions-card:nth-child(6) { transition-delay: 0.40s; }
/* Hover lift — complementing Tailwind hover classes already on the element */
.solutions-card:hover {
  transform: translateY(-6px) !important;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.30s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.30s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reduced motion ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-bar { height: var(--target-h) !important; }
}

/* ============================================
   Dark Hero Theme (orbital background)
   ============================================ */
.hero-section--dark {
  background: #020810 !important;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Animated starfield mesh */
.hero-section--dark .hero-mesh-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(34,211,238,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 0%   50%,  rgba(168,139,250,0.05) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 100% 50%,  rgba(249,115,22,0.03) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 50%  100%, rgba(34,197,94,0.04) 0%, transparent 60%);
  animation: meshShift 16s ease-in-out infinite alternate;
}

/* ── Aurora colour blobs ─────────────── */
.hero-aurora {
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform, opacity;
}
.hero-aurora--cyan {
  width: 55vw; height: 55vw;
  max-width: 700px; max-height: 700px;
  top: -10%; left: -8%;
  background: radial-gradient(ellipse at center, rgba(34,211,238,0.18) 0%, transparent 70%);
  animation: auroraFloat1 22s ease-in-out infinite alternate;
}
.hero-aurora--purple {
  width: 50vw; height: 50vw;
  max-width: 640px; max-height: 640px;
  top: 20%; right: -10%;
  background: radial-gradient(ellipse at center, rgba(168,139,250,0.16) 0%, transparent 70%);
  animation: auroraFloat2 28s ease-in-out infinite alternate;
}
.hero-aurora--pink {
  width: 40vw; height: 40vw;
  max-width: 520px; max-height: 520px;
  top: 50%; left: 30%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at center, rgba(254,123,205,0.10) 0%, transparent 70%);
  animation: auroraFloat3 19s ease-in-out infinite alternate;
}
.hero-aurora--orange {
  width: 35vw; height: 35vw;
  max-width: 440px; max-height: 440px;
  bottom: 5%; left: 5%;
  background: radial-gradient(ellipse at center, rgba(249,115,22,0.10) 0%, transparent 70%);
  animation: auroraFloat4 24s ease-in-out infinite alternate;
}
@keyframes auroraFloat1 {
  0%   { transform: translate(0,    0)    scale(1);    opacity: 0.8; }
  40%  { transform: translate(6%,   8%)   scale(1.12); opacity: 1;   }
  70%  { transform: translate(-4%,  12%)  scale(0.95); opacity: 0.7; }
  100% { transform: translate(10%,  -5%)  scale(1.08); opacity: 0.9; }
}
@keyframes auroraFloat2 {
  0%   { transform: translate(0,    0)    scale(1);    opacity: 0.7; }
  35%  { transform: translate(-8%,  6%)   scale(1.10); opacity: 1;   }
  65%  { transform: translate(5%,  -10%)  scale(0.92); opacity: 0.8; }
  100% { transform: translate(-12%, 8%)   scale(1.15); opacity: 0.6; }
}
@keyframes auroraFloat3 {
  0%   { transform: translateY(-50%) scale(1);    opacity: 0.6; }
  45%  { transform: translateY(-42%) scale(1.18); opacity: 1;   }
  100% { transform: translateY(-58%) scale(0.90); opacity: 0.7; }
}
@keyframes auroraFloat4 {
  0%   { transform: translate(0,   0)   scale(1);    opacity: 0.8; }
  50%  { transform: translate(8%,  -6%) scale(1.12); opacity: 0.5; }
  100% { transform: translate(-4%, 10%) scale(0.95); opacity: 0.9; }
}

/* Bottom fade-out into next section */
.hero-bottom-fade {
  height: 220px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(2,8,16,0.55) 40%,
    rgba(2,8,16,0.88) 75%,
    #020810 100%);
}

/* ── Text overrides ───────────────────── */
.hero-section--dark .text-on-surface           { color: rgba(255,255,255,0.95) !important; }
.hero-section--dark .text-on-surface-variant   { color: rgba(255,255,255,0.52) !important; }
.hero-section--dark .hero-caption-divider      { background-color: rgba(255,255,255,0.15) !important; }
.hero-section--dark [class*="border-outline-variant"] { border-color: rgba(255,255,255,0.12) !important; }
.hero-section--dark .hero-btn-secondary        { color: rgba(255,255,255,0.55); }
.hero-section--dark .hero-btn-secondary:hover  { color: #FE7BCD; }
.hero-section--dark .hero-scroll-hint          { color: rgba(255,255,255,0.28); }
.hero-section--dark .hero-scroll-hint [class*="border"] { border-color: rgba(255,255,255,0.15) !important; }

/* ── Bento glassmorphism cards ─────────── */
.hero-section--dark .hero-card {
  background: rgba(4,13,26,0.58) !important;
  border-color: rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero-section--dark .hero-card.bg-tertiary {
  background: rgba(6,20,42,0.78) !important;
}
.hero-section--dark .hero-card .text-on-surface-variant {
  color: rgba(255,255,255,0.42) !important;
}
/* Unlabelled card text (e.g. "Qualified leads delivered...") */
.hero-section--dark .hero-card p:not([class*="text-primary"]) {
  color: rgba(255,255,255,0.82) !important;
}
.hero-section--dark .hero-card p.text-on-surface-variant {
  color: rgba(255,255,255,0.42) !important;
}

/* ── Live badge ───────────────────────── */
.hero-section--dark .bg-green-100   { background: rgba(34,197,94,0.15) !important; }
.hero-section--dark .text-green-700 { color: rgba(74,222,128,0.90) !important; }

/* ── Trust row border divider ─────────── */
.hero-section--dark [class*="border-l"] { border-color: rgba(255,255,255,0.14) !important; }

/* ============================================
   Solutions Section — Dark Indigo Theme
   ============================================ */
.solutions-dark {
  background: linear-gradient(160deg, #07091A 0%, #0B0D24 45%, #0E0B1E 75%, #08091C 100%);
}

/* Section heading text */
.solutions-dark h2                     { color: rgba(255,255,255,0.95); }
.solutions-dark .text-on-surface-variant { color: rgba(255,255,255,0.50) !important; }
.solutions-dark p                      { color: rgba(255,255,255,0.50); }

/* Label pill */
.solutions-dark .bg-primary\/\[0\.08\]  { background: rgba(254,123,205,0.12) !important; }
.solutions-dark .border-primary\/20     { border-color: rgba(254,123,205,0.25) !important; }

/* Cards 1 & 3 — glassmorphism */
.solutions-dark .bg-surface-container-lowest {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.solutions-dark .bg-surface-container-lowest:hover {
  border-color: rgba(254,123,205,0.35) !important;
  background: rgba(255,255,255,0.07) !important;
}
.solutions-dark .bg-surface-container-lowest h3 { color: rgba(255,255,255,0.92); }
.solutions-dark .bg-surface-container-lowest p  { color: rgba(255,255,255,0.48); }
.solutions-dark .bg-surface-container-lowest li { color: rgba(255,255,255,0.78); }

/* Startup / Enterprise tier badges */
.solutions-dark .bg-green-100  { background: rgba(34,197,94,0.12) !important; }
.solutions-dark .text-green-700 { color: rgba(74,222,128,0.85) !important; }
.solutions-dark .bg-purple-100 { background: rgba(168,139,250,0.12) !important; }
.solutions-dark .text-purple-700 { color: rgba(196,181,253,0.90) !important; }

/* Bottom comparison strip cards */
.solutions-dark .bg-surface-container-low {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08);
}
.solutions-dark .bg-surface-container-low p { color: rgba(255,255,255,0.90); }
.solutions-dark .bg-surface-container-low p.text-on-surface-variant,
.solutions-dark .bg-surface-container-low p:last-child { color: rgba(255,255,255,0.45) !important; }