/* Global Styles */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Hero Section Background Image */
.hero-bg {
    position: relative;
    background-image: url('../images/2831.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
    overflow: hidden;
}

/* Dark mode uses the original image */
.dark .hero-bg {
    background-image: url('../images/782.jpg');
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0.05) 80%,
        rgba(255, 255, 255, 1) 100%
    );
    z-index: 1;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0.8) 70%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0.8) 70%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0) 100%
    );
}

.hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 20%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.3) 70%,
        rgba(255, 255, 255, 0.6) 85%,
        #f9fbfc 100%
    );
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.7) 60%,
        rgba(0, 0, 0, 1) 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.7) 60%,
        rgba(0, 0, 0, 1) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.dark .hero-bg::before {
    background: linear-gradient(
        to bottom,
        rgba(17, 24, 39, 0.85) 0%,
        rgba(17, 24, 39, 0.7) 40%,
        rgba(17, 24, 39, 0.4) 70%,
        rgba(17, 24, 39, 0.1) 90%,
        transparent 100%
    );
}

.dark .hero-bg::after {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 20%,
        rgba(17, 24, 39, 0.2) 50%,
        rgba(17, 24, 39, 0.4) 80%,
        #18212f 100%
    );
}

.hero-bg > * {
    position: relative;
    z-index: 10;
}

/* Logo Font */
.logo-font {
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
}

/* Logo in dark mode - white color */
.dark .logo-font {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Gradient Text Effect */
.gradient-text {
    background: linear-gradient(135deg, #006663 0%, #008a85 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .gradient-text {
    background: linear-gradient(135deg, #00a39e 0%, #00c4bd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom Teal Color Classes */
.bg-teal-primary {
    background-color: #006663 !important;
}

.hover\:bg-teal-primary:hover {
    background-color: #004d4a !important;
}

/* Subscribe Button */
.bg-subscribe-btn {
    background-color: #be3b00 !important;
}

.hover\:bg-subscribe-btn:hover {
    background-color: #a03300 !important;
}

.text-teal-primary {
    color: #006663 !important;
}

.dark .text-teal-primary {
    color: #00cfc9 !important;
}

.hover\:text-teal-primary:hover {
    color: #006663 !important;
}

.dark .hover\:text-teal-primary:hover {
    color: #00a39e !important;
}

.bg-teal-light {
    background-color: rgba(0, 102, 99, 0.1) !important;
}

.dark .bg-teal-light {
    background-color: rgba(0, 163, 158, 0.2) !important;
}

.text-teal-light {
    color: #00a39e !important;
}

.dark .text-teal-light {
    color: #00c4bd !important;
}

.focus\:ring-teal-primary:focus {
    --tw-ring-color: #006663 !important;
    ring-color: #006663 !important;
}

/* Cursor Shimmer Effect */
#cursorShimmer {
    position: fixed;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 102, 99, 0.12) 0%,
        rgba(0, 138, 133, 0.08) 25%,
        rgba(0, 163, 158, 0.04) 45%,
        transparent 70%
    );
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    mix-blend-mode: screen;
    transition: opacity 0.5s ease;
    will-change: transform, left, top;
    filter: blur(40px);
    opacity: 0;
}

.dark #cursorShimmer {
    background: radial-gradient(
        circle,
        rgba(0, 163, 158, 0.18) 0%,
        rgba(0, 196, 189, 0.12) 25%,
        rgba(0, 163, 158, 0.06) 45%,
        transparent 70%
    );
    mix-blend-mode: screen;
    filter: blur(50px);
}

/* Additional shimmer particles */
#cursorShimmer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 30% 30%,
        rgba(0, 102, 99, 0.25) 0%,
        rgba(0, 138, 133, 0.15) 40%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    animation: shimmer-pulse 4s ease-in-out infinite;
    filter: blur(30px);
}

.dark #cursorShimmer::before {
    background: radial-gradient(
        circle at 30% 30%,
        rgba(0, 163, 158, 0.3) 0%,
        rgba(0, 196, 189, 0.2) 40%,
        transparent 70%
    );
    filter: blur(35px);
}

#cursorShimmer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 70% 70%,
        rgba(0, 138, 133, 0.3) 0%,
        rgba(0, 163, 158, 0.15) 35%,
        transparent 60%
    );
    transform: translate(-50%, -50%);
    animation: shimmer-pulse 3s ease-in-out infinite reverse;
    filter: blur(25px);
}

.dark #cursorShimmer::after {
    background: radial-gradient(
        circle at 70% 70%,
        rgba(0, 196, 189, 0.35) 0%,
        rgba(0, 163, 158, 0.2) 35%,
        transparent 60%
    );
    filter: blur(30px);
}

@keyframes shimmer-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.9) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) rotate(180deg);
    }
}

/* Glimmer sparkle effect */
@keyframes glimmer {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

/* Reduce effect on mobile devices */
@media (max-width: 768px) {
    #cursorShimmer {
        display: none;
    }
}

/* Performance optimization */
@media (prefers-reduced-motion: reduce) {
    #cursorShimmer,
    #cursorShimmer::before,
    #cursorShimmer::after {
        animation: none;
    }
}

/* Glowing Dots Background */
#glowingDots {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.glow-dot {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 138, 133, calc(0.4 * var(--luminosity, 1))) 0%,
        rgba(0, 163, 158, calc(0.3 * var(--luminosity, 1))) 40%,
        rgba(0, 196, 189, calc(0.2 * var(--luminosity, 1))) 70%,
        transparent 100%
    );
    box-shadow: 
        0 0 calc(8px * var(--luminosity, 1)) rgba(0, 138, 133, calc(0.25 * var(--luminosity, 1))),
        0 0 calc(16px * var(--luminosity, 1)) rgba(0, 163, 158, calc(0.15 * var(--luminosity, 1))),
        0 0 calc(24px * var(--luminosity, 1)) rgba(0, 196, 189, calc(0.1 * var(--luminosity, 1)));
    animation: float-dot ease-in-out infinite;
    filter: blur(0.5px);
    will-change: transform, opacity;
    transition: transform 0.3s ease-out;
}

/* Cursor repulsion - applied as additional transform via wrapper */
.glow-dot-wrapper {
    position: absolute;
    will-change: transform;
    transition: transform 0.2s ease-out;
}

.glow-dot-wrapper.cursor-repulse {
    transform: translate(var(--cursor-offset-x, 0px), var(--cursor-offset-y, 0px));
}

.dark .glow-dot {
    background: radial-gradient(
        circle,
        rgba(0, 163, 158, calc(1 * var(--luminosity, 1))) 0%,
        rgba(0, 196, 189, calc(0.8 * var(--luminosity, 1))) 40%,
        rgba(0, 163, 158, calc(0.6 * var(--luminosity, 1))) 70%,
        transparent 100%
    );
    box-shadow: 
        0 0 calc(12px * var(--luminosity, 1)) rgba(0, 163, 158, calc(0.7 * var(--luminosity, 1))),
        0 0 calc(24px * var(--luminosity, 1)) rgba(0, 163, 158, calc(0.5 * var(--luminosity, 1))),
        0 0 calc(36px * var(--luminosity, 1)) rgba(0, 196, 189, calc(0.3 * var(--luminosity, 1)));
}

@keyframes float-dot {
    0%, 100% {
        transform: translate(calc(var(--radius-x, 40px) + var(--drift-x, 0px)), calc(0px + var(--drift-y, 0px))) scale(0.95);
        opacity: 0.6;
    }
    12.5% {
        opacity: 0.75;
        transform: translate(calc(var(--radius-x, 40px) * 0.9239 + var(--drift-x, 0px)), calc(var(--radius-y, 40px) * 0.3827 + var(--drift-y, 0px))) scale(0.98);
    }
    25% {
        opacity: 0.85;
        transform: translate(calc(var(--radius-x, 40px) * 0.7071 + var(--drift-x, 0px)), calc(var(--radius-y, 40px) * 0.7071 + var(--drift-y, 0px))) scale(1);
    }
    37.5% {
        opacity: 0.9;
        transform: translate(calc(var(--radius-x, 40px) * 0.3827 + var(--drift-x, 0px)), calc(var(--radius-y, 40px) * 0.9239 + var(--drift-y, 0px))) scale(1.02);
    }
    50% {
        transform: translate(calc(0px + var(--drift-x, 0px)), calc(var(--radius-y, 40px) + var(--drift-y, 0px))) scale(1.05);
        opacity: 1;
    }
    62.5% {
        opacity: 0.9;
        transform: translate(calc(var(--radius-x, 40px) * -0.3827 + var(--drift-x, 0px)), calc(var(--radius-y, 40px) * 0.9239 + var(--drift-y, 0px))) scale(1.02);
    }
    75% {
        opacity: 0.85;
        transform: translate(calc(var(--radius-x, 40px) * -0.7071 + var(--drift-x, 0px)), calc(var(--radius-y, 40px) * 0.7071 + var(--drift-y, 0px))) scale(1);
    }
    87.5% {
        opacity: 0.75;
        transform: translate(calc(var(--radius-x, 40px) * -0.9239 + var(--drift-x, 0px)), calc(var(--radius-y, 40px) * 0.3827 + var(--drift-y, 0px))) scale(0.98);
    }
}

/* Pulsing glow animation */
.glow-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 163, 158, calc(0.15 * var(--luminosity, 1))) 0%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    animation: pulse-glow 4s ease-in-out infinite;
    animation-delay: calc(var(--pulse-delay, 0) * 1s);
}

.dark .glow-dot::before {
    background: radial-gradient(
        circle,
        rgba(0, 163, 158, calc(0.4 * var(--luminosity, 1))) 0%,
        transparent 70%
    );
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: calc(0.4 * var(--luminosity, 1));
        transform: translate(-50%, -50%) scale(0.85);
    }
    50% {
        opacity: calc(0.9 * var(--luminosity, 1));
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Ensure content is above dots */
nav,
section,
footer {
    position: relative;
    z-index: 10;
}

/* Analytics Comparison Table Styles */
.analytics-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.analytics-table-container table {
    min-width: 800px;
}

.analytics-table-container th:first-child,
.analytics-table-container td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 5;
}

.analytics-table-container thead th:first-child {
    z-index: 15;
}

@media (max-width: 768px) {
    .analytics-table-container {
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    
    .analytics-table-container table {
        font-size: 0.875rem;
    }
    
    .analytics-table-container th,
    .analytics-table-container td {
        padding: 0.75rem 0.5rem;
    }
}

/* Reduce dots on mobile for performance */
@media (max-width: 768px) {
    #glowingDots .glow-dot:nth-child(n+26) {
        display: none;
    }
}

/* Performance optimization for dots */
@media (prefers-reduced-motion: reduce) {
    .glow-dot,
    .glow-dot::before {
        animation: none;
    }
    .glow-dot {
        opacity: 0.3;
    }
}