/* FOLHA DE ESTILO DA WEB SYSTEMS HOME */

:root {
    --primary: #008080; /* Transformative Teal */
    --secondary: #0984e3; /* Azul Puro */
    --bg-warm: #fdfaf6;
    --text-dark: #2d3436;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
body { 
    font-family: 'Inter', sans-serif; 
    background: var(--bg-warm);
    color: var(--text-dark);
    overflow-x: hidden; 
}

body::-webkit-scrollbar {
    display: none;
    overflow: hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- Header / Hero --- */
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 50px 10%;
    min-height: 100vh;
    gap: 40px;
}

.hero-content { flex: 1; min-width: 300px; }
.hero-content span { color: var(--secondary); font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }
.hero-content h1 { font-family: 'Outfit', sans-serif; font-size: 3.5rem; margin: 20px 0; line-height: 1.1; }
.hero-content p { font-size: 1.1rem; margin-bottom: 30px; opacity: 0.8; max-width: 500px; }

/* Vídeo com Formas Orgânicas */
.hero-video {
    flex: 1;
    min-width: 350px;
    position: relative;
    z-index: 1;
}
.video-container {
    width: 100%;
    aspect-ratio: 16/9;
    background: #eee;
    border-radius: 100px 30px 100px 30px; /* Bordas assimétricas 2026 */
    overflow: hidden;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.08);
}
.hero-video::after {
    content: '';
    position: absolute;
    width: 150px; height: 150px;
    background: #ffeaa7;
    border-radius: 50%;
    bottom: -30px; right: -30px;
    z-index: -1;
}

/* --- Carrossel de Frases (Business Celebrities) --- */
.quote-section {
    background: #fbf8df;
    padding: 40px 10%;
    text-align: center;
}
.quote-container {
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.quote-slide {
    animation: slideFade 15s infinite;
    display: none;
}
.quote-slide.active { display: block; }
.quote-text { font-size: 1.8rem; font-style: italic; color: var(--primary); margin-bottom: 20px; }
.quote-author { font-weight: bold; color: var(--text-dark); }

@keyframes slideFade {
    0%, 20% { opacity: 1; }
    25%, 100% { opacity: 0; }
}

/* Botão CTA Principal */
.btn-main {
    display: inline-block;
    padding: 18px 40px;
    background: var(--secondary);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(9, 132, 227, 0.2);
}

.btn-main:hover { transform: translateY(-5px); background: var(--primary); }

/* Responsividade Mobile */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }
    .hero { padding: 40px 5%; text-align: center; }
    .hero-content p { margin: 20px auto; }
    .video-container { border-radius: 40px; }
}

/* Preloader */
.preloader-wrap{
    position:fixed; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center;
    background:linear-gradient(180deg, rgba(14,29,33,0.04), rgba(255,255,255,0.02));
    z-index:99999; 
    transition:opacity .4s ease, visibility .4s;
}

.preloader-wrap.hidden{ 
    opacity:0; 
    visibility:hidden; 
    pointer-events:none 
}

.cube-scene{ 
    width:110px; 
    height:110px; 
    perspective:900px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

.cube{ 
    position:relative; 
    width:64px; 
    height:64px; 
    transform-style:preserve-3d; 
    animation:spinCube 2.8s cubic-bezier(.2,.9,.3,.98) infinite; 
    transition:filter .15s linear; 
}

.cube__face{ 
    position:absolute; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    border-radius:10px; 
    font-weight:600; 
    font-size:0.85rem; 
    background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55)); 
    border:1px solid rgba(255,255,255,0.5); 
    box-shadow: 0 8px 28px rgba(2,132,199,0.08), inset 0 1px 0 rgba(255,255,255,0.6); 
    color:var(--accent-500); 
    backdrop-filter: blur(6px); 
}

.cube__face--front{ 
    transform: translateZ(32px) 
}

.cube__face--back{ 
    transform: rotateY(180deg) translateZ(32px) 
}

.cube__face--right{ 
    transform: rotateY(90deg) translateZ(32px) 
}

.cube__face--left{ 
    transform: rotateY(-90deg) translateZ(32px) 
}

.cube__face--top{ 
    transform: rotateX(90deg) translateZ(32px) 
}

.cube__face--bottom{ 
    transform: rotateX(-90deg) translateZ(32px) 
}

@keyframes spinCube{ 
    0%{ transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg) } 
    50%{ transform: rotateX(260deg) rotateY(180deg) rotateZ(30deg) } 
    100%{ transform: rotateX(370deg) rotateY(360deg) rotateZ(360deg) } 
}

/* Focus styles */
a:focus, button:focus, input:focus, textarea:focus{ 
    outline:4px solid rgba(13,148,136,0.12); 
    outline-offset:3px; 
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ 
    .cube, .network-bg{ 
    animation:none !important } [data-aos]{ 
        transition:none !important; 
        opacity:1 !important; 
        transform:none !important 
    } 
}