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

        :root {
            --alg-dark: #020617;
            --alg-slate: #0f172a;
            --alg-blue: #2563eb;
            --alg-cyan: #22d3ee;
            --alg-indigo: #4f46e5;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--alg-dark);
            color: #f8fafc;
        }

        .gradient-text {
            background: linear-gradient(90deg, var(--alg-blue), var(--alg-cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-glow {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
            pointer-events: none;
        }

        .card-glass {
            background: rgba(30, 41, 59, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .card-glass:hover {
            border-color: rgba(37, 99, 235, 0.5);
            transform: translateY(-5px);
        }

        .product-img {
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .product-img:hover {
            transform: scale(1.02);
        }

        html {
            scroll-behavior: smooth;
        }

        /* Hero typing headline */
        .type-line {
            display: block;
            width: 100%;
            text-align: center;
            min-height: 3.1em;
            padding: 0 0.5rem;
        }

        .type-wrap {
            display: inline-flex;
            align-items: baseline;
            justify-content: center;
            gap: 0.25rem;
            max-width: 100%;
            flex-wrap: wrap;
            white-space: normal;
        }

        .type-text {
            display: inline-block;
            position: relative;
            will-change: contents;
            white-space: normal;
            overflow-wrap: anywhere;
            line-height: 1.1;
            padding-right: 0.3ch;
        }

        .type-text::after {
            content: "|";
            position: absolute;
            right: 0;
            bottom: 0.05em;
            font-weight: 600;
            color: rgba(34, 211, 238, 0.95);
            text-shadow: 0 0 10px rgba(34, 211, 238, 0.25);
            animation: caretBlink 900ms steps(1) infinite;
        }

        @media (max-width: 640px) {
            .type-line {
                min-height: 3.9em;
                padding: 0 0.75rem;
            }
        }

        @keyframes caretBlink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }

        .savings-glow {
            background: linear-gradient(90deg, #22d3ee, #38bdf8, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: savingsPulse 2.4s ease-in-out infinite;
            font-weight: 600;
        }

        @keyframes savingsPulse {
            0%, 100% { filter: drop-shadow(0 0 0 rgba(34, 211, 238, 0)); opacity: 0.85; }
            50% { filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4)); opacity: 1; }
        }

        /* Reduce motion */
        @media (prefers-reduced-motion: reduce) {
            .type-text::after { animation: none !important; }
            .savings-glow { animation: none !important; }
        }

        /* FAQ sizing refinements */
        #faq button {
            padding: 0.85rem 1.25rem !important;
        }

        #faq button span {
            font-size: 1rem !important;
        }

        #faq .max-h-0 p,
        #faq .max-h-0 div {
            padding: 1rem 1.25rem !important;
            font-size: 0.95rem !important;
            line-height: 1.6 !important;
        }

        @media (max-width: 640px) {
            #faq button {
                padding: 0.75rem 1rem !important;
            }

            #faq button span {
                font-size: 0.95rem !important;
            }

            #faq .max-h-0 p,
            #faq .max-h-0 div {
                padding: 0.85rem 1rem !important;
                font-size: 0.9rem !important;
            }
        }

        
        /* SLIDES 
        .ea-slide {
          position: absolute;
          inset: 0;
          opacity: 0;
          transition: opacity .6s ease;
          pointer-events: none;
          z-index: 1;
        }

        .ea-slide.is-active {
          opacity: 1;
          pointer-events: auto;
        }

        .ea-slide img {
          
        
          width: 100%;
          height: 100%;          
          object-fit: cover;
          cursor: pointer;
        }

        .ea-slide {
          opacity: 0;
          transform: scale(1.02);
          transition: opacity .6s ease, transform .6s ease;
        }

        .ea-slide.is-active {
          opacity: 1;
          transform: scale(1);
        }

        .ea-slide img {
          cursor: zoom-in;
        }
        */

        /* =========================================================
           EA SLIDER – SMOOTH & NATURAL ANIMATION
        ========================================================= */

        .ea-slide {
          position: absolute;
          inset: 0;
          opacity: 0;
          transform: scale(1.035);
          transition:
            opacity 0.9s cubic-bezier(0.4, 0.0, 0.2, 1),
            transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
          pointer-events: none;
          z-index: 1;
          will-change: opacity, transform;
        }

        .ea-slide.is-active {
          opacity: 1;
          transform: scale(1);
          pointer-events: auto;
          z-index: 2;
        }

        .ea-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: zoom-in;
        }

        /* Accessibility */
        @media (prefers-reduced-motion: reduce) {
          .ea-slide {
            transition: none !important;
            transform: none !important;
          }
        }



        /* NAV */
        .ea-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 40px;
          height: 40px;
          border-radius: 999px;
          background: rgba(15,23,42,.7);
          color: white;
          z-index: 20;
        }

        .ea-prev { left: 12px; }
        .ea-next { right: 12px; }

        /* DOTS */
        .ea-dot {
          width: 10px;
          height: 10px;
          border-radius: 999px;
          background: rgba(255,255,255,.3);
        }

        .ea-dot.is-active {
          background: #3b82f6;
        }

        /* MODAL */
        #image-modal.show img {
          transform: scale(1);
        }