body {
            font-family: 'Inter', sans-serif;
            background-color: #0d0d11;
            color: #f3f4f6;
        }
        .serif-font {
            font-family: 'Playfair Display', serif;
        }
        /* Efeito de brilho do vidro */
        .glass-panel {
            background: rgba(22, 22, 29, 0.75);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        /* Estilos e Cores dos Cartões (Simulando a Impressão 3D e Padrão de Cristais) */
        .card-preview-container {
            perspective: 1000px;
        }
        
        /* Texturas baseadas nas cores reais do filamento 3D */
        .card-bg-preto {
            background: linear-gradient(135deg, #151518 0%, #26262b 50%, #0d0d0f 100%);
            box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.1);
        }
        .card-bg-azul {
            background: linear-gradient(135deg, #0f3994 0%, #1c56cb 50%, #0a2563 100%);
            box-shadow: 0 15px 35px rgba(15, 57, 148, 0.4), inset 0 1px 2px rgba(255,255,255,0.2);
        }
        .card-bg-branco {
            background: linear-gradient(135deg, #eef0f3 0%, #ffffff 50%, #d5dadf 100%);
            box-shadow: 0 15px 35px rgba(255,255,255,0.1), inset 0 1px 3px rgba(255,255,255,0.8);
            color: #111827 !important;
        }
        .card-bg-rosa {
            background: linear-gradient(135deg, #d81b60 0%, #f43f5e 50%, #be123c 100%);
            box-shadow: 0 15px 35px rgba(244, 63, 94, 0.4), inset 0 1px 2px rgba(255,255,255,0.2);
        }
        .card-bg-laranja {
            background: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #c2410c 100%);
            box-shadow: 0 15px 35px rgba(249, 115, 22, 0.4), inset 0 1px 2px rgba(255,255,255,0.2);
        }
        .card-bg-nude {
            background: linear-gradient(135deg, #c4a482 0%, #dec4a7 50%, #ab8966 100%);
            box-shadow: 0 15px 35px rgba(196, 164, 130, 0.35), inset 0 1px 2px rgba(255,255,255,0.2);
        }

        /* SVG Overlay para Textura Poligonal (Low-poly) */
        .polygon-overlay {
            mix-blend-mode: overlay;
            opacity: 0.38;
            pointer-events: none;
        }
        .card-bg-branco .polygon-overlay {
            mix-blend-mode: multiply;
            opacity: 0.22;
        }

        /* Animações e Transições */
        .transition-all-300 {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Animações da Demonstração NFC + QR (Ciclo 12s) */
        @keyframes phoneCycle {
            0% { transform: translateY(120px); }
            8%, 42% { transform: translateY(10px); }
            50% { transform: translateY(120px); }
            58%, 92% { transform: translateY(10px); }
            100% { transform: translateY(120px); }
        }
        @keyframes nfcToastDrop {
            0%, 10% { opacity: 0; transform: translateY(-10px) scale(1); }
            12%, 18% { opacity: 1; transform: translateY(10px) scale(1); }
            19% { opacity: 1; transform: translateY(10px) scale(0.95); }
            20%, 100% { opacity: 0; transform: translateY(-10px) scale(1); }
        }
        @keyframes qrCameraDrop {
            0%, 49% { opacity: 0; }
            55%, 95% { opacity: 1; }
            100% { opacity: 0; }
        }
        @keyframes qrPromptDrop {
            0%, 60% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            62%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            69% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
            70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
        }
        @keyframes nfcPulseCycle {
            0%, 10% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); border-width: 2px; }
            13% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            20%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); border-width: 0px; }
        }
        @keyframes screenFadeCycle {
            0%, 19% { opacity: 0; transform: scale(0.95); }
            20%, 40% { opacity: 1; transform: scale(1); }
            41%, 69% { opacity: 0; transform: scale(0.95); }
            70%, 90% { opacity: 1; transform: scale(1); }
            91%, 100% { opacity: 0; transform: scale(0.95); }
        }
        @keyframes cardFlipCycle {
            0%, 45% { transform: rotate(12deg) rotateY(0deg); }
            50%, 95% { transform: rotate(12deg) rotateY(180deg); }
            100% { transform: rotate(12deg) rotateY(0deg); }
        }
        
        .animate-demo-phone { animation: phoneCycle 12s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
        .animate-demo-toast { animation: nfcToastDrop 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
        .animate-demo-camera { animation: qrCameraDrop 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
        .animate-demo-qr-prompt { animation: qrPromptDrop 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
        .animate-demo-pulse { animation: nfcPulseCycle 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
        .animate-demo-screen { animation: screenFadeCycle 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
        .animate-demo-card { animation: cardFlipCycle 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

        /* Animações de Introdução (Cinematic Splash - Ultra Premium) */
        @keyframes cinematicCardDrop {
            0% { 
                opacity: 0; 
                transform: translate3d(0, -150px, 400px) rotateX(70deg) rotateY(-30deg) rotateZ(15deg);
                filter: drop-shadow(0 50px 50px rgba(255,191,0,0.2)) brightness(1.8) blur(4px);
            }
            100% { 
                opacity: 1; 
                transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0);
                filter: drop-shadow(0 15px 35px rgba(0,0,0,0.6)) brightness(1) blur(0px);
            }
        }
        @keyframes cinematicGlassReveal {
            0% { opacity: 0; backdrop-filter: blur(0px); transform: scale(0.97); }
            100% { opacity: 1; backdrop-filter: blur(12px); transform: scale(1); }
        }
        @keyframes cinematicFormReveal {
            0% { opacity: 0; transform: translateX(40px); filter: blur(3px); }
            100% { opacity: 1; transform: translateX(0); filter: blur(0); }
        }
        @keyframes cinematicFadeUp {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes cinematicFadeDown {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .animate-intro-card-3d {
            animation: cinematicCardDrop 1.2s cubic-bezier(0.2, 0.9, 0.2, 1.15) 0.3s forwards;
            opacity: 0;
            will-change: transform, opacity, filter;
        }
        .animate-intro-glass {
            animation: cinematicGlassReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            opacity: 0;
        }
        .animate-intro-form {
            animation: cinematicFormReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
            opacity: 0;
        }
        .animate-intro-header {
            animation: cinematicFadeDown 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s forwards;
            opacity: 0;
        }
        .animate-intro-footer {
            animation: cinematicFadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
            opacity: 0;
        }

        /* Ambient Aurora Glow */
        @keyframes aurora1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(5%, 10%) scale(1.1); }
        }
        @keyframes aurora2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-5%, -10%) scale(1.2); }
        }
        .animate-aurora-1 { animation: aurora1 15s ease-in-out infinite; }
        .animate-aurora-2 { animation: aurora2 20s ease-in-out infinite reverse; }