/* ==================== KORDIO — BOLD & MODERN SaaS ==================== */

/* ==================== BASE ==================== */
html {
  scroll-behavior: smooth;
}

/* ==================== LIGHT SECTION STYLES ==================== */
.light-section {
  background: #f8fafc;
  position: relative;
  z-index: 1;
}

section[class*="bg-white"],
section[class*="bg-[#f8fafc]"],
section[class*="bg-[#0f0f15]"],
section[class*="bg-[#2a0548]"],
footer[class*="bg-[#2a0548]"] {
  position: relative;
  z-index: 1;
}

/* Light card */
.light-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.light-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* Light section form inputs */
.light-input {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #1e293b;
  transition: all 0.3s ease;
}

.light-input::placeholder {
  color: #9ca3af;
}

.light-input:focus {
  background: #ffffff;
  border-color: rgba(59, 7, 100, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 7, 100, 0.1);
  outline: none;
}

/* Select arrow for light theme */
.light-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(107,114,128,0.6)' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* ==================== DARK SECTION STYLES ==================== */

.dark-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.dark-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all 0.3s ease;
}

.dark-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.dark-input:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(59, 7, 100, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 7, 100, 0.15);
  outline: none;
}

/* ==================== HERO GRADIENT TEXT ==================== */
.hero-gradient-text {
  color: #c084fc;
  -webkit-text-fill-color: #c084fc;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ==================== HERO VIDEO BACKGROUND ==================== */
#heroVideo {
  filter: saturate(1.1);
}

/* ==================== WAVE CANVAS ==================== */
#waveCanvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ==================== GLASSMORPHISM ==================== */
.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 40px rgba(59, 7, 100, 0.15);
  transform: translateY(-4px);
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59, 7, 100, 0.08);
  border-radius: 1.25rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card-light:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(59, 7, 100, 0.15);
  box-shadow: 0 8px 40px rgba(59, 7, 100, 0.08);
  transform: translateY(-4px);
}

/* ==================== GRADIENT BORDER GLOW ==================== */
.glow-border {
  position: relative;
}

.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #3b0764, #7c3aed, #a855f7, #3b0764);
  background-size: 300% 300%;
  animation: border-glow 4s ease infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.glow-border:hover::before {
  opacity: 1;
}

@keyframes border-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ==================== ANIMATIONS ==================== */

@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, 0) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, 0) scale(1.05); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float-delayed {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(1deg); }
  66% { transform: translateY(-4px) rotate(-1deg); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

/* Scroll-triggered fade-in */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ==================== FLOATING BADGES ==================== */
.floating-badge {
  animation: float-delayed 5s ease-in-out infinite;
}

.floating-badge:nth-child(2) { animation-delay: 0.5s; animation-duration: 6s; }
.floating-badge:nth-child(3) { animation-delay: 1s; animation-duration: 7s; }
.floating-badge:nth-child(4) { animation-delay: 1.5s; animation-duration: 5.5s; }
.floating-badge:nth-child(5) { animation-delay: 0.3s; animation-duration: 6.5s; }
.floating-badge:nth-child(6) { animation-delay: 0.8s; animation-duration: 5.8s; }

/* ==================== NEON BUTTON ==================== */
.neon-btn {
  position: relative;
}

.neon-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #3b0764, #7c3aed);
  opacity: 0;
  filter: blur(16px);
  transition: opacity 0.4s ease;
  z-index: -1;
}

.neon-btn:hover::after {
  opacity: 0.5;
}

/* ==================== MOCKUP PREVIEW ==================== */
.mockup-container {
  position: relative;
  background: linear-gradient(135deg, rgba(59, 7, 100, 0.3), rgba(124, 58, 237, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  overflow: hidden;
}

.mockup-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 40%);
  pointer-events: none;
}

.mockup-dots {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.mockup-dot:first-child { background: #ef4444; }
.mockup-dot:nth-child(2) { background: #f59e0b; }
.mockup-dot:nth-child(3) { background: #22c55e; }

/* ==================== NAVBAR ==================== */
.navbar-scrolled {
  background: rgba(26, 10, 46, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar-light-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==================== STAT NUMBERS ==================== */
.stat-number {
  text-shadow: 0 0 40px rgba(59, 7, 100, 0.3);
}

/* ==================== WAVE DIVIDER ==================== */
.wave-divider {
  position: absolute;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider-top {
  top: -1px;
}

.wave-divider-bottom {
  bottom: -1px;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 60px;
}

@media (min-width: 768px) {
  .wave-divider svg {
    height: 80px;
  }
}

/* ==================== TESTIMONIAL QUOTE ==================== */
.testimonial-card {
  position: relative;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 5rem;
  font-family: Georgia, serif;
  color: rgba(59, 7, 100, 0.08);
  line-height: 1;
  pointer-events: none;
}

/* ==================== AUDIO PLAYER ==================== */
.audio-player {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.audio-player:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

@keyframes waveform {
  0%, 100% { height: 8px; }
  50% { height: 24px; }
}

.waveform-bar {
  animation: waveform 1s ease-in-out infinite;
}
.waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.waveform-bar:nth-child(4) { animation-delay: 0.3s; }
.waveform-bar:nth-child(5) { animation-delay: 0.15s; }

/* ==================== PRICING ==================== */
.pricing-popular {
  border: 2px solid rgba(59, 7, 100, 0.4);
  box-shadow: 0 8px 30px rgba(59, 7, 100, 0.1);
}

/* ==================== FAQ ACCORDION ==================== */
.faq-item {
  border-bottom: 1px solid #e5e7eb;
}

.faq-item:last-child {
  border-bottom: none;
}

/* ==================== INDUSTRY PILL ==================== */
.industry-pill {
  transition: all 0.3s ease;
}

.industry-pill.active,
.industry-pill:hover {
  background: #3b0764;
  color: #fff;
  border-color: #3b0764;
}

/* ==================== COMPARISON SECTION ==================== */
.comparison-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

/* ==================== SELECTION ==================== */
::selection {
  background: rgba(59, 7, 100, 0.2);
  color: inherit;
}

/* ==================== PULSE RING ==================== */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(59, 7, 100, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(59, 7, 100, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 7, 100, 0); }
}

/* ==================== ICON PULSE ==================== */
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.icon-hover:hover .icon-inner {
  animation: icon-pulse 1s ease-in-out infinite;
}