/* style.css */
[x-cloak] { display: none !important; }

:root {
    /* Brand Colors - Main Logo (Grayscale / Charcoal) */
    --brand-50: #f8fafc;
    --brand-100: #f1f5f9;
    --brand-500: #475569; /* Slate 500 */
    --brand-600: #334155; /* Slate 600 */
    --brand-900: #0f172a; /* Slate 900 */
}

/* Base Adjustments */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 9999px;
    color: white;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    box-shadow: 0 4px 14px 0 rgba(71, 85, 105, 0.39);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(71, 85, 105, 0.5);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 9999px;
    color: var(--brand-600);
    background: transparent;
    border: 2px solid var(--brand-500);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(71, 85, 105, 0.1);
    transform: translateY(-2px);
}

.btn-connect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 9999px;
    color: white;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    box-shadow: 0 4px 14px 0 rgba(13, 148, 136, 0.39);
    transition: all 0.3s ease;
}

.btn-connect:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.5);
}

/* Hover Micro-animations */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Wave Background Animation based on reference */
.wave-bg {
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="%2394a3b8" fill-opacity="0.1" d="M0 50 C 20 20, 80 80, 100 50 L 100 100 L 0 100 Z" /><path fill="%2364748b" fill-opacity="0.05" d="M0 60 C 30 30, 70 90, 100 60 L 100 100 L 0 100 Z" /></svg>') no-repeat bottom center;
    background-size: cover;
    animation: wave 20s infinite linear alternate;
}

@keyframes wave {
    0% { transform: scale(1.1) translateX(-2%); }
    100% { transform: scale(1.1) translateX(2%); }
}

/* Custom Google Translate Widget Styling */
.goog-te-banner-frame { display: none !important; }
body { top: 0px !important; }
#google_translate_element select {
    appearance: none;
    background-color: transparent;
    border: none;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
}

/* WhatsApp Floating Button */
#whatsapp-float {
    animation: whatsapp-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}

/* QR Code Tooltip Enhancements */
#whatsapp-float .group-hover\:opacity-100 {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

#whatsapp-float:hover img {
    transform: scale(1.05);
}

#whatsapp-float .relative.bg-white {
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
}

@keyframes whatsapp-entrance {
    from {
        opacity: 0;
        transform: scale(0) translateY(40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Hero Canvas */
#hero-particles {
    touch-action: none;
}

/* Language Marquee Carousel */
.language-marquee {
    overflow: hidden;
    width: 100%;
}

.language-marquee-track {
    display: flex;
    animation: marquee-scroll 25s linear infinite;
    width: max-content;
}

.language-marquee:hover .language-marquee-track {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hide scrollbar for solutions tabs on mobile */
.snap-x::-webkit-scrollbar { display: none; }
.snap-x { -ms-overflow-style: none; scrollbar-width: none; }

/* Hide Google Translate Bar */
.goog-te-banner-frame.skiptranslate, 
.goog-te-gadget-icon,
.goog-te-banner,
.goog-te-menu-value,
iframe.goog-te-banner-frame,
iframe.goog-te-menu-frame,
iframe[id=":1.container"],
iframe[id=":2.container"],
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
    visibility: hidden !important;
}

/* Hide VLibras default access button */
[vw-access-button], .vw-access-button, .active[vw-access-button],
div[vw] [vw-access-button] {
    display: none !important;
    visibility: hidden !important;
}

body {
    top: 0px !important;
    position: static !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Fix for top spacing Google sometimes adds */
html {
    margin-top: 0px !important;
}

/* ===== MOBILE PREMIUM STYLES ===== */
@media (max-width: 768px) {
    /* Hero adjustments for mobile */
    .hero-bg, section.relative.bg-white {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    /* Smaller WhatsApp button on mobile */
    #whatsapp-float {
        width: 3.5rem;
        height: 3.5rem;
        bottom: 1rem;
        right: 1rem;
    }

    #whatsapp-float svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Premium mobile typography */
    h1 {
        font-size: 2.25rem !important;
        line-height: 1.15 !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    /* OgeaConnect phone mockup mobile */
    .scale-110 {
        transform: scale(0.85);
    }

    /* Better card spacing on mobile */
    .rounded-\[32px\] {
        border-radius: 1.25rem;
    }

    .rounded-\[40px\] {
        border-radius: 1.5rem;
    }
}

@media (max-width: 480px) {
    #whatsapp-float {
        bottom: 0.75rem;
        right: 0.75rem;
    }
}


/* ===== TEXT REVEAL ANIMATIONS ===== */
.reveal-text {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
    will-change: opacity, transform;
}
.reveal-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}