/* Global Styles */
:root {
    --bs-primary: #006A6A;
    --bs-primary-rgb: 0, 106, 106;
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-bg: #ffffff;
    --bs-body-color: #1e293b;
}

body {
    font-family: var(--bs-font-sans-serif);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

/* Utilities */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.05em; }
.leading-tight { line-height: 1.1; }
.fw-medium { font-weight: 500; }
.fs-7 { font-size: 0.875rem; }
.mw-md { max-width: 600px; }
.mw-lg { max-width: 800px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }

/* Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, #006A6A 0%, #1abc9c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navbar */
.navbar-blur {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-blur.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    background: radial-gradient(circle at top right, rgba(0, 106, 106, 0.05), transparent 40%),
                radial-gradient(circle at bottom left, rgba(26, 188, 156, 0.05), transparent 40%);
}

/* Animated Blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    z-index: 0;
    animation: float 10s infinite ease-in-out;
}

.blob-1 {
    width: 300px;
    height: 300px;
    background: rgba(0, 106, 106, 0.2);
    top: -50px;
    right: -50px;
}

.blob-2 {
    width: 250px;
    height: 250px;
    background: rgba(26, 188, 156, 0.2);
    bottom: 50px;
    left: 20%;
    animation-delay: -5s;
}

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

/* Animations */
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin-slow {
    animation: rotate-slow 12s linear infinite;
}

/* Glass Card */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

/* Mockup Grid */
.mockup-grid {
    display: grid;
    gap: 2px;
}
.mock-cell {
    width: 12px;
    height: 12px;
    background: #e2e8f0;
    border-radius: 2px;
}
.mock-cell.filled {
    background: #006A6A;
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.075) !important;
}

/* Buttons */
.btn-primary {
    background: #006A6A;
    border: none;
    transition: all 0.2s;
}
.btn-primary:hover {
    background: #004D4D;
    transform: translateY(-1px);
}
.shadow-primary-sm {
    box-shadow: 0 4px 14px 0 rgba(0, 106, 106, 0.39);
}

/* Cookie Consent Banner */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    z-index: 1050; /* Above navbar if needed, or standard Bootstrap z-index */
    padding: 1.5rem 0;
    transform: translateY(100%);
    transition: transform 0.4s ease-out;
}

#cookie-banner.show {
    transform: translateY(0);
}

/* Performance Stats Responsive Fix */

#performance .display-5 {

    font-size: clamp(1rem, 3.5vw, 2.5rem) !important; /* Scaled down more aggressively to fit boxes */

    white-space: nowrap; /* Forces text to stay on one line */

}



@media (min-width: 980px) and (max-width: 1200px) {



    #performance .display-5 {



        font-size: 1rem !important; 



    }



    #performance .p-4 {



        padding: 1rem 0.5rem !important; /* Extremely tight padding to maximize space */



    }



}



@media (min-width: 992px) {

    #performance .display-5 {

        font-size: 2.5rem !important; /* Fixed large size for desktops */

    }

}