/* Clean white background with uniform dot grid */
        body {
            background-color: #FFFFFF;
            background-image: radial-gradient(#D1D5DB 1px, transparent 1px);
            background-size: 32px 32px;
            color: #111827;
        }

        /* Hero Section Background setup */
        .hero-section {
            position: relative;
            background-color: #000;
        }
        
        .hero-bg-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }
        
        .hero-bg-overlay {
            position: absolute;
            inset: 0;
            background: rgba(17, 24, 39, 0.75);
            z-index: 1;
        }

        /* Utilities */
        .glass-header {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-bottom: 1px solid #E5E7EB;
        }
        
        .transition-transform {
            transition-property: transform, opacity, box-shadow;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 300ms;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #F3F4F6; 
        }
        ::-webkit-scrollbar-thumb {
            background: #D1D5DB; 
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #9CA3AF; 
        }
        
  
    .reveal, .opacity-0, .translate-y-4 {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }


    @keyframes slideRight {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(300%); }
    }
    @keyframes dashDraw {
        0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
        50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15; }
        100% { stroke-dasharray: 100, 200; stroke-dashoffset: -125; }
    }
    @keyframes barPulse {
        0%, 100% { opacity: 1; transform: scaleY(1); }
        50% { opacity: 0.6; transform: scaleY(0.7); }
    }
    .anim-slide-right {
        animation: slideRight 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    .anim-dash {
        stroke-dasharray: 120;
        stroke-dashoffset: 120;
        animation: dashDraw 4s linear infinite;
    }
    .bar-1 { animation: barPulse 1.2s ease-in-out infinite; }
    .bar-2 { animation: barPulse 1.2s ease-in-out 0.2s infinite; }
    .bar-3 { animation: barPulse 1.2s ease-in-out 0.4s infinite; }
    .bar-4 { animation: barPulse 1.2s ease-in-out 0.6s infinite; }

  @keyframes gradient-border {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    .anim-border-mac {
        background: linear-gradient(60deg, #E5E7EB, #0478CD, #93C5FD, #A78BFA, #E5E7EB);
        background-size: 300% 300%;
        animation: gradient-border 4s ease infinite;
    }

   @keyframes shimmer-bar {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(200%); }
    }
    @keyframes draw-graph {
        from { stroke-dashoffset: 800; }
        to { stroke-dashoffset: 0; }
    }
    @keyframes fade-up-slow {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .anim-shimmer {
        animation: shimmer-bar 2.5s infinite linear;
    }
    .anim-draw-line {
        stroke-dasharray: 800;
        stroke-dashoffset: 800;
        animation: draw-graph 3s cubic-bezier(0.4, 0, 0.2, 1) forwards infinite alternate-reverse;
    }
    .anim-circle-prog {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: draw-graph 2s ease-out forwards;
    }

   /* Hide scrollbar for horizontal mobile tabs */
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Handle arrow visibility purely through CSS based on active class */
    .version-tab .tab-arrow {
        display: none;
    }
    @media (min-width: 768px) {
        .version-tab.active .tab-arrow {
            display: block;
        }
    }


    .faq-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
    }
    
    .faq-item.active .faq-content {
        max-height: 200px; /* Adjust if content is very long */
        opacity: 1;
    }
    
    .faq-item.active .faq-icon {
        transform: rotate(180deg);
        color: #0478CD; /* brand-accent */
    }
    
    .faq-item.active {
        border-color: #0478CD;
    }