* { font-family: 'Inter', sans-serif; }
        body { background: #050505; color: #ffffff; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #262626; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #404040; }

        @property --gradient-angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }

        @keyframes border-spin {
            to { --gradient-angle: 360deg; }
        }

        @keyframes ping {
            75%, 100% { transform: scale(2); opacity: 0; }
        }

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

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(40px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes pulse-green {
            0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
            50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
        }

        .animate-fadeInUp { animation: fadeInUp 0.8s ease forwards; }
        .animate-slideIn { animation: slideIn 0.5s ease forwards; }
        .animate-float { animation: float 3s ease-in-out infinite; }

        .shiny-btn {
            position: relative;
            background: #000;
            border: 1px solid rgba(255,255,255,0.1);
            overflow: hidden;
        }
        .shiny-btn::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: conic-gradient(from var(--gradient-angle), transparent 60%, #f97316 80%, transparent 100%);
            border-radius: inherit;
            z-index: -1;
            animation: border-spin 2.5s linear infinite;
        }

        .glass-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            transition: all 150ms ease;
        }
        .glass-card:hover {
            border-color: rgba(249, 115, 22, 0.3);
        }

        .text-gradient {
            background: linear-gradient(to bottom, #ffffff, #a3a3a3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .glow-orange {
            background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 70%);
        }

        .step-line {
            background: linear-gradient(to bottom, rgba(249,115,22,0.5), transparent);
        }

        /* M-Pesa Modal */
        .modal-overlay {
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(8px);
        }

        .mpesa-green { color: #4CAF50; }
        .mpesa-bg { background: #4CAF50; }

        .mpesa-step { transition: all 0.4s ease; }
        .mpesa-step.active { opacity: 1; transform: translateY(0); }
        .mpesa-step.hidden-step { opacity: 0; transform: translateY(20px); display: none; }

        .phone-input {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            transition: border-color 0.2s;
        }
        .phone-input:focus {
            border-color: #4CAF50;
            outline: none;
            box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
        }

        .brand-logo-frame {
            width: 46px;
            height: 46px;
            padding: 3px;
            border-radius: 15px;
            background: linear-gradient(145deg, rgba(249,115,22,0.92), rgba(234,88,12,0.78));
            border: 1px solid rgba(255,255,255,0.28);
            box-shadow: 0 0 0 1px rgba(249,115,22,0.18), 0 12px 28px rgba(249,115,22,0.28);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .brand-logo-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 12px;
            background: rgba(255,255,255,0.96);
        }

        .toast {
            animation: slideIn 0.4s ease forwards;
        }

        .product-card.selected {
            border-color: rgba(249,115,22,0.5) !important;
            background: rgba(249,115,22,0.05) !important;
        }

        .product-media-frame {
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 65%),
                rgba(28, 25, 23, 0.75);
        }

        .product-media-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
        }

        .product-card {
            transition: all 0.3s ease;
        }

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

        .whatsapp-help-link {
            position: fixed;
            left: 24px;
            bottom: 24px;
            z-index: 45;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-radius: 999px;
            background: linear-gradient(135deg, #25d366, #128c7e);
            color: #ffffff;
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: 0 14px 34px rgba(18, 140, 126, 0.28);
            text-decoration: none;
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
        }

        .whatsapp-help-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 40px rgba(18, 140, 126, 0.34);
            filter: brightness(1.03);
        }

        .whatsapp-help-icon {
            flex-shrink: 0;
        }

        .whatsapp-help-text {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        @media (max-width: 640px) {
            .whatsapp-help-link {
                left: 16px;
                right: 16px;
                bottom: 16px;
                justify-content: center;
                padding: 13px 16px;
            }

            .whatsapp-help-text {
                font-size: 12px;
            }
        }

         @keyframes blob {
            0% { transform: translate(0px, 0px) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
            100% { transform: translate(0px, 0px) scale(1); }
        }
        .animate-blob {
            animation: blob 7s infinite;
        }
        .animation-delay-2000 {
            animation-delay: 2s;
        }
        .qty-btn {
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
            color: #fff;
            font-size: 16px;
        }
        .qty-btn:hover { background: rgba(249,115,22,0.2); border-color: rgba(249,115,22,0.4); }