html { scroll-behavior: smooth; }
        body { font-family: 'Inter', system-ui, sans-serif; }
        ::selection { background: #1e3b61; color: #fff; }

        .grid-pattern {
            background-image:
                linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
            background-size: 36px 36px;
        }

        .hero-glow {
            background:
                radial-gradient(circle at 75% 30%, rgba(59,130,246,.10), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(30,64,175,.06), transparent 40%);
        }

        .platform-card {
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }
        .platform-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 45px rgba(15,23,42,.08);
        }

        .platform-arrow { transition: transform .25s ease; }
        .platform-card:hover .platform-arrow,
        .group:hover .platform-arrow {
            transform: translateX(4px);
        }

        .nav-link { position: relative; }
        .nav-link::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: -6px;
            height: 2px;
            background: #2563eb;
            transform: scaleX(0);
            transition: transform .2s ease;
        }
        .nav-link:hover::after { transform: scaleX(1); }

        .mockup-shadow {
            box-shadow: 0 25px 60px rgba(15,23,42,.12), 0 8px 20px rgba(15,23,42,.06);
        }

        .number-outline {
            color: transparent;
            -webkit-text-stroke: 1px rgba(148,163,184,.35);
        }

        .status-dot {
            box-shadow: 0 0 0 4px rgba(16,185,129,.12);
        }

        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(226, 232, 240, 0.9) 20%, rgba(226, 232, 240, 0.9) 80%, transparent 100%);
        }
        .nav-item.nav-active {
        color: #2563eb !important;
        font-weight: 600 !important;
    }
    
    .nav-indicator-active {
        width: 2rem !important; /* 32px */
        background-color: #2563eb !important;
    }
    
    .nav-item.nav-active .nav-indicator {
        width: 2rem !important;
        background-color: #2563eb !important;
    }
    
    /* Animação suave para indicador */
    .nav-indicator {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Efeito de brilho no item ativo */
    .nav-item.nav-active {
        position: relative;
    }
    
    .nav-item.nav-active::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 0.75rem;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%);
        pointer-events: none;
        animation: navGlow 2s ease-in-out infinite;
    }
    
    @keyframes navGlow {
        0%, 100% {
            opacity: 0.5;
        }
        50% {
            opacity: 1;
        }
    }
    
    /* Suporte para telas com safe area */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        body {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
    
    /* Ajuste para telas muito pequenas */
    @media (max-width: 360px) {
        nav .flex > a {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        
        nav .flex > a span:not(.leading-none) {
            font-size: 9px;
        }
    }
    
    /* Efeito de pressionar */
    nav .flex > a:active {
        transform: scale(0.95);
    }

    .image-render-sharp {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0); /* Ativa aceleração de hardware sem embaçar subpixels */
    backface-visibility: hidden;
    }

     /* Garante que labels e ícones nunca sejam afetados pelo script */
    .nav-label,
    .nav-icon {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .nav-item.nav-active {
        color: #2563eb !important;
        font-weight: 600 !important;
    }
    
    /* Apenas o indicador é animado */
    .nav-indicator {
        opacity: 0;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    .animate-hero-enter {
        animation: heroFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Respeita usuários que desativam animações no sistema operacional */
    @media (prefers-reduced-motion: reduce) {
        .animate-hero-enter {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }