/* ABAIQ Landing Page - Enhanced Components with Stripe-like Effects */

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--btn-radius);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
}

.btn-primary:active {
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-white);
  color: var(--text-dark);
  border: 2px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: rgba(102, 126, 234, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
}

.btn-large {
  padding: 20px 40px;
  font-size: var(--font-size-lg);
}

.btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.btn:hover svg {
  transform: translateX(4px);
}

/* ========== GLASS CARD - Clean & Minimal ========== */
.glass-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  position: relative;
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(102, 126, 234, 0.2);
}

/* ========== FEATURE CARD - Clean ========== */
.feature-card {
  padding: 32px;
  text-align: center;
}

.feature-card .feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.feature-card:hover .feature-icon {
  background: rgba(102, 126, 234, 0.12);
  transform: scale(1.05);
}

.feature-card .feature-icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.feature-card .feature-icon.orange {
  background: rgba(245, 158, 11, 0.08);
}

.feature-card .feature-icon.orange svg {
  color: var(--warning);
}

.feature-card h3 {
  margin-bottom: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
}

.feature-card p {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ========== BADGE ========== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
  color: var(--primary-blue);
  border: 1px solid rgba(102, 126, 234, 0.2);
  margin-bottom: 20px;
  animation: badgePulse 3s infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(102, 126, 234, 0); }
}

/* ========== STAT CARD - Enhanced ========== */
.stat-card {
  text-align: center;
  padding: 32px;
  position: relative;
}

.stat-number {
  display: block;
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 800;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.stat-card:hover .stat-number {
  transform: scale(1.1);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========== TESTIMONIAL CARD - Enhanced ========== */
.testimonial-card {
  padding: 32px;
  position: relative;
}

.testimonial-card blockquote {
  font-size: var(--font-size-base);
  font-style: italic;
  color: var(--text-dark);
  margin-bottom: 20px;
  line-height: 1.7;
  position: relative;
}

.testimonial-card blockquote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: -10px;
  font-size: 60px;
  color: var(--primary-blue);
  opacity: 0.15;
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-card cite {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.testimonial-card .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

/* ========== STEP INDICATOR - Enhanced ========== */
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 20px;
  position: relative;
}

.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: white;
  font-size: var(--font-size-xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  position: relative;
  z-index: 2;
  transition: var(--transition-base);
}

.step:hover .step-number {
  transform: scale(1.15);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
}

.step h4 {
  margin-bottom: 8px;
  font-size: var(--font-size-lg);
}

.step p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  max-width: 180px;
}

.step-arrow {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--primary-blue);
  opacity: 0.5;
}

.step-arrow svg {
  width: 28px;
  height: 28px;
}

/* ========== GRADIENT TEXT HERO - IQ Logo Colors, Static ========== */
.gradient-text-hero {
  background: linear-gradient(135deg, #fb76ff 0%, #5f6aff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: inherit;
}

/* ========== GRADIENT TEXT ANIMATED - Enhanced ========== */
.gradient-text-animated {
  background: linear-gradient(
    90deg,
    #667eea 0%,
    #764ba2 20%,
    #f093fb 40%,
    #667eea 60%,
    #764ba2 80%,
    #f093fb 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 3s linear infinite;
  font-weight: 700;
  position: relative;
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Glow effect behind text */
.gradient-text-animated::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, #667eea, #f093fb, #667eea);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 3s linear infinite;
  filter: blur(20px);
  opacity: 0.5;
  z-index: -1;
}

/* No glow on hero headline — too large, shadow visible */
.hero-headline .gradient-text-animated::after {
  display: none;
}

/* ========== VIDEO CONTAINER - Enhanced ========== */
.video-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f5f3ff 0%, #faf7fc 100%);
  box-shadow:
    0 25px 50px rgba(102, 126, 234, 0.15),
    0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Video frame decoration */
.video-container::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: var(--primary-gradient);
  z-index: -1;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(240, 147, 251, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #f8f7ff 0%, #f0eeff 100%);
}

/* Animated dots in placeholder */
.video-placeholder::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle, rgba(102, 126, 234, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.5;
}

.play-button {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 40px rgba(102, 126, 234, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transition: var(--transition-base);
  position: relative;
  z-index: 10;
}

/* Ripple effect */
.play-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary-gradient);
  animation: playRipple 2s ease-out infinite;
}

@keyframes playRipple {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}

.play-button:hover {
  transform: scale(1.15);
  box-shadow:
    0 15px 50px rgba(102, 126, 234, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.play-button svg {
  width: 36px;
  height: 36px;
  margin-left: 4px;
  position: relative;
  z-index: 1;
}

/* ========== INTERACTIVE CURSOR GLOW ========== */
.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

body:hover .cursor-glow {
  opacity: 1;
}

/* ========== TILT CARD EFFECT ========== */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.tilt-card-inner {
  transition: transform 0.1s ease;
}

/* ========== MAGNETIC BUTTON ========== */
.magnetic-btn {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ========== HOVER UNDERLINE ========== */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-gradient);
  transition: width 0.3s ease;
}

.hover-underline:hover::after {
  width: 100%;
}

/* ========== FLOATING LABEL ========== */
.floating-label {
  position: absolute;
  top: -12px;
  left: 20px;
  padding: 4px 12px;
  background: var(--primary-gradient);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ========== SPOTLIGHT EFFECT ========== */
.spotlight {
  position: relative;
  overflow: hidden;
}

.spotlight::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spotlight:hover::before {
  opacity: 1;
}