/* Base styles and imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Tailwind Customization is moved to tailwind-config.js */

/* ====================== ANIMATIONS ====================== */
/* Float animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

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

@keyframes rotate3d {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

@keyframes morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
        border-radius: 20% 60% 30% 70% / 70% 30% 60% 40%;
    }
    75% {
        border-radius: 40% 30% 70% 30% / 30% 70% 40% 60%;
    }
}

@keyframes morph-slow {
    0%, 100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }
    25% {
        border-radius: 38% 62% 64% 36% / 58% 42% 65% 35%;
    }
    50% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }
    75% {
        border-radius: 67% 33% 47% 53% / 39% 54% 46% 61%;
    }
}

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

/* Data Visualization Animations */
@keyframes grow-width {
    0% {
        width: 0;
    }
    100% {
        width: var(--growth-target, 100%);
    }
}

@keyframes grow-height {
    0% {
        height: 0;
    }
    100% {
        height: var(--growth-target, 100%);
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
    }
}

@keyframes scroll-down {
    0% {
        transform: translateY(0);
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(30px);
        opacity: 0;
    }
}

@keyframes text-shadow-pulse {
    0%, 100% {
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
    }
    50% {
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
    }
}

@keyframes typing {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}

@keyframes blink {
    50% {
        border-color: transparent
    }
}

@keyframes draw-path {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes highlight-animation {
    0% {
        width: 0;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}

@keyframes spin-very-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes reverse-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes grow-bar {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(1.05);
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.05;
    }
    50% {
        opacity: 0.1;
    }
}

/* ====================== COMPONENT STYLES ====================== */
/* Data Visualization Components */
.data-chart {
    transition: all 0.3s ease;
}

.data-chart:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.chart-tooltip {
    background-color: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 50;
}

.chart-line {
    transition: stroke-width 0.2s ease;
}

.data-chart:hover .chart-line {
    stroke-width: 4px;
}

.chart-point {
    filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.3));
    transition: all 0.2s ease;
    cursor: pointer;
}

.chart-point:hover {
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.7));
}

.animate-grow-width {
    animation: grow-width 1.5s ease-out forwards;
}

.animate-grow-height {
    animation: grow-height 1.5s ease-out forwards;
}

.animate-slide-up {
    animation: slide-up 1s ease-out forwards;
}

.dashboard-card {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.dashboard-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced 3D effects for data visualizations */
.data-visualization-section .card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.data-visualization-section .card-3d:hover {
    transform: rotateX(5deg) rotateY(5deg);
}

/* Consistent content wrapper */
.max-width-wrapper {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Consistent section spacing */
.section-spacing {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 1024px) {
    .section-spacing {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* ====================== SWIPER SLIDER STYLES ====================== */
/* Enhanced styles for Swiper slider effect */
.swiper.testimonialSwiper {
    overflow: hidden;
}

.swiper.testimonialSwiper .swiper-slide {
    transition: all 0.6s ease;
}

.swiper.testimonialSwiper .swiper-slide-active {
    z-index: 10;
}

.testimonialSwiper .swiper-slide {
    opacity: 0.7;
    filter: blur(1px);
    transform: scale(0.92);
    transition: all 0.5s ease;
}

.testimonialSwiper .swiper-slide-active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); */
}

/* Custom styles for navigation buttons and pagination */
.testimonialSwiper .swiper-button-next,
.testimonialSwiper .swiper-button-prev {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #3B82F6;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonialSwiper .swiper-button-next:hover,
.testimonialSwiper .swiper-button-prev:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.testimonialSwiper .swiper-button-next::after,
.testimonialSwiper .swiper-button-prev::after {
    content: "";
    font-size: 0;
}

.testimonialSwiper .swiper-pagination {
    position: relative;
    bottom: 0;
    width: auto;
}

.testimonialSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(59, 130, 246, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.testimonialSwiper .swiper-pagination-bullet-active {
    background-color: #3B82F6;
    transform: scale(1.2);
}

/* ====================== UTILITY CLASSES ====================== */
.gradient-text {
    background: linear-gradient(135deg, #4F46E5 0%, #2563EB 50%, #1D4ED8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    letter-spacing: -0.02em;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.neo-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.hero-bg {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
    position: relative;
    overflow: hidden;
    will-change: transform;
}

/* ====================== SECTION-SPECIFIC STYLES ====================== */
/* Styles for the overlapping sections effect */
#pain-points-section {
    position: relative;
    will-change: transform, clip-path;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: box-shadow 0.3s ease;
    clip-path: inset(8% 0 0 0);
    /* Initial clip path */
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
}

/* Hero section specific parallax styles */
#hero-section {
    overflow: hidden;
    transform-style: preserve-3d;
    position: relative;
    z-index: 1;
}

/* Wave effects for background */
.wave {
    position: absolute;
    width: 200%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%233B82F6' fill-opacity='0.1' d='M0,192L48,176C96,160,192,128,288,138.7C384,149,480,203,576,224C672,245,768,235,864,202.7C960,171,1056,117,1152,101.3C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: repeat-x;
    animation: wave 25s linear infinite;
}

.wave1 {
    z-index: 1;
    opacity: 0.3;
    bottom: 0;
    animation: wave 30s linear infinite;
}

.wave2 {
    z-index: 2;
    opacity: 0.2;
    bottom: 10%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23F59E0B' fill-opacity='0.1' d='M0,224L48,213.3C96,203,192,181,288,176C384,171,480,181,576,197.3C672,213,768,235,864,234.7C960,235,1056,213,1152,202.7C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    animation: wave 22s linear infinite;
}

.wave3 {
    z-index: 3;
    opacity: 0.1;
    bottom: 20%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230EA5E9' fill-opacity='0.1' d='M0,64L48,80C96,96,192,128,288,149.3C384,171,480,181,576,165.3C672,149,768,107,864,101.3C960,96,1056,128,1152,154.7C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    animation: wave 18s linear infinite;
}

/* ====================== ANIMATION CLASSES ====================== */
.animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* Enable smooth scrolling for page transitions */
html.parallax-scrolling {
    scroll-behavior: smooth;
    height: 100%;
}

/* Ensure content doesn't get cut off during transitions */
body {
    overflow-x: hidden;
    min-height: 100%;
}

.card-hover {
    transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.card-hover:hover {
    transform: translateY(-10px);
}

/* Smooth FAQ animation styles */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, margin 0.4s ease-in-out;
    opacity: 0;
    margin-top: 0;
}

.faq-content.active {
    max-height: 1000px; /* Large enough to fit content */
    opacity: 1;
    margin-top: 1.5rem;
}

.scroll-indicator {
    animation: bounce 2s infinite;
}

.stats-counter {
    font-variant-numeric: tabular-nums;
}

.glow-border {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glow-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #3B82F6, #1E40AF, #F59E0B, #3B82F6);
    background-size: 200% 200%;
    animation: shimmer 6s linear infinite;
    filter: blur(8px);
    z-index: -1;
}

.morphing-blob {
    animation: morph 15s linear infinite alternate;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(30, 64, 175, 0.2) 100%);
    position: absolute;
    z-index: 0;
}

.animate-morph-slow {
    animation: morph-slow 20s linear infinite alternate;
}

.animate-spin-very-slow {
    animation: spin-very-slow 30s linear infinite;
}

.animate-reverse-spin {
    animation: reverse-spin 25s linear infinite;
}

.animate-text-shadow {
    animation: text-shadow-pulse 3s ease-in-out infinite;
}

.animate-scroll-down {
    animation: scroll-down 2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

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

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

.animate-float-delay-2 {
    animation: float-delay-2 10s ease-in-out infinite;
    animation-delay: -4s;
}

.draw-path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: draw-path 2.5s ease-out forwards;
}

.typing-text {
    display: inline-block;
    overflow: hidden;
    border-right: 3px solid white;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end) 1s forwards, blink 0.75s step-end infinite;
    width: 0;
}

.highlight-animation {
    animation: highlight-animation 3s ease-in-out infinite;
}

.chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.perspective-1200 {
    perspective: 1200px;
}

.dashboard-3d {
    transform-style: preserve-3d;
}

.chart-point {
    transform-origin: center;
    transform-box: fill-box;
}

/* ====================== BUTTON STYLES ====================== */
.neo-button {
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.neo-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s;
}

.neo-button:hover::before {
    left: 100%;
}