/* Page-specific components */
.glass-nav { 
    background: var(--bg);
    border-bottom: 1px solid var(--border); 
}

.card-saas { 
    background: var(--surface); 
    border: 1px solid var(--border); 
    border-radius: 16px; 
    box-shadow: var(--shadow-soft); 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}

.card-saas:hover { 
    transform: translateY(-2px); 
    box-shadow: var(--shadow); 
}

.btn-primary-gradient { 
    background: var(--primary-gradient); 
    color: #FFF; 
    border-radius: 12px; 
    padding: 12px 24px; 
    font-weight: 600; 
}

.btn-cta-gradient { 
    background: var(--cta-gradient); 
    color: #0B1220; 
    border-radius: 12px; 
    padding: 12px 24px; 
    font-weight: 700; 
}

.btn-whatsapp-orange {
    background: linear-gradient(135deg, #FF8C00, #FF6B00);
    color: #FFF;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-whatsapp-orange:hover {
    background: linear-gradient(135deg, #FF6B00, #E55A00);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 0, 0.4);
}

.hero-sky { 
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary), transparent 90%) 0%, var(--bg) 100%); 
    position: relative; 
    overflow: hidden; 
}

.dark .hero-sky { 
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary), transparent 85%) 0%, var(--bg) 100%); 
}

.glass-card { 
    background: color-mix(in srgb, var(--surface), transparent 90%); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

/* Animações Flutuantes Suaves */
@keyframes float-card-1 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
    50% { transform: translate3d(0, -12px, 0) rotate(-1deg) scale(1.02); }
}

@keyframes float-card-2 {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(6deg) scale(1); }
    50% { transform: translate3d(0, -15px, 0) rotate(4deg) scale(1.03); }
}

.animate-float-1 {
    animation: float-card-1 6s ease-in-out infinite;
}

.animate-float-2 {
    animation: float-card-2 7s ease-in-out infinite;
}

/* Institutional SVG Animations */
@keyframes flow {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

@keyframes pulse-node {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.5); opacity: 0.6; }
}

.gas-flow {
    stroke-dasharray: 4, 12;
    animation: flow 3s linear infinite;
    will-change: stroke-dashoffset;
}

.inspection-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: pulse-node 2s ease-in-out infinite;
    will-change: transform, opacity;
}

.font-handwriting {
    font-family: 'Dancing Script', 'Segoe Script', cursive;
}

@media (max-width: 768px) {
    .container-airy {
        padding: 0 16px;
    }
}
