/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --bg: #04111f;
    --bg2: #071d33;

    --primary: #2ab7ff;
    --primary-light: #74d9ff;

    --text: #ffffff;
    --muted: #b8c6d6;

    --card: rgba(255,255,255,.04);
    --border: rgba(255,255,255,.08);

}

html{
    scroll-behavior:smooth;
}

body{

    font-family: "Montserrat", sans-serif;

    color: var(--text);

    background:
        radial-gradient(circle at 15% 20%, #1d8dff22 0%, transparent 35%),
        radial-gradient(circle at 85% 80%, #00c8ff22 0%, transparent 30%),
        linear-gradient(135deg, var(--bg), var(--bg2));

    overflow-x:hidden;

    min-height:100vh;

}

/* ==========================================================================
   BACKGROUND
   ========================================================================== */

#background{

    position:fixed;
    inset:0;

    overflow:hidden;

    z-index:-10;

}

.gradient{

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle,#0c5fff18 0%,transparent 55%);

    filter:blur(90px);

}

.grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:50px 50px;

    opacity:.35;

}

#particles{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container{

    width:min(1400px,92%);

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

/* ==========================================================================
   LOGO
   ========================================================================== */

.brand{

    display:flex;

    justify-content:center;

    align-items:center;

}

.logo-wrapper{

    position:relative;

}

.logo{

    width:100%;

    max-width:520px;

    position:relative;

    z-index:3;

    filter:
        drop-shadow(0 0 25px rgba(60,180,255,.35))
        drop-shadow(0 0 50px rgba(60,180,255,.15));

}

.logo-glow{

    position:absolute;

    width:420px;

    height:420px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(circle,

            rgba(70,180,255,.45),

            rgba(70,180,255,.18),

            transparent 70%);

    filter:blur(50px);

    animation:pulse 6s ease-in-out infinite;

}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{

    display:flex;

    flex-direction:column;

}

.eyebrow{

    color:var(--primary-light);

    font-weight:700;

    letter-spacing:4px;

    font-size:.85rem;

}

.divider{

    width:70px;

    height:4px;

    border-radius:5px;

    margin:20px 0 35px;

    background:linear-gradient(90deg,var(--primary),transparent);

}

.hero h1{

    font-size:clamp(2.6rem,5vw,4.4rem);

    font-weight:800;

    line-height:1.08;

    margin-bottom:30px;

}

.hero h1 span{

    color:var(--primary-light);

}

.hero p{

    color:var(--muted);

    font-size:1.1rem;

    line-height:1.8;

    max-width:620px;

}

.hero h3{

    margin-top:45px;

    font-size:1.35rem;

    font-weight:600;

}

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:35px;

}

.button{

    display:flex;

    align-items:center;

    text-decoration:none;

    color:white;

    padding:18px 28px;

    border-radius:18px;

    min-width:280px;

    transition:.35s;

    backdrop-filter:blur(12px);

}

.button strong{

    display:block;

    font-size:1rem;

}

.button small{

    display:block;

    margin-top:5px;

    color:#c8d7e5;

}

.primary{

    background:linear-gradient(135deg,#1496ff,#33d1ff);

    box-shadow:0 10px 35px rgba(0,140,255,.35);

}

.secondary{

    background:var(--card);

    border:1px solid var(--border);

}

.button:hover{

    transform:translateY(-6px);

}

.primary:hover{

    box-shadow:0 20px 45px rgba(0,160,255,.45);

}

.secondary:hover{

    border-color:#3fb9ff;

    background:rgba(255,255,255,.08);

}

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */

.services{

    margin-top:70px;

}

.services h2{

    font-size:1.3rem;

    margin-bottom:24px;

}

.service-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.service-grid article{

    padding:20px;

    border-radius:16px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,255,255,.06);

    transition:.3s;

}

.service-grid article:hover{

    transform:translateY(-4px);

    border-color:#33c8ff;

    background:rgba(255,255,255,.06);

}

.service-grid h4{

    font-weight:600;

    font-size:.95rem;

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{

    padding:30px;

    text-align:center;

}

.footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:12px;

}

.footer-links span{

    width:6px;

    height:6px;

    border-radius:50%;

    background:#4ecbff;

}

.footer-links a{

    color:#8bcfff;

    text-decoration:none;

}

.footer-links a:hover{

    color:white;

}

footer p{

    color:#90a9bf;

    font-size:.9rem;

}

/* ==========================================================================
   ANIMAÇÕES
   ========================================================================== */

@keyframes pulse{

    0%,100%{

        transform:translate(-50%,-50%) scale(1);

        opacity:.7;

    }

    50%{

        transform:translate(-50%,-50%) scale(1.15);

        opacity:1;

    }

}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width:1100px){

    .container{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

        padding:70px 0;

    }

    .hero{

        align-items:center;

    }

    .buttons{

        justify-content:center;

    }

    .service-grid{

        grid-template-columns:1fr;

        width:100%;

        max-width:500px;

    }

    .logo{

        max-width:380px;

    }

    .logo-glow{

        width:300px;
        height:300px;

    }

}

@media (max-width:640px){

    .hero h1{

        font-size:2.3rem;

    }

    .hero p{

        font-size:1rem;

    }

    .button{

        width:100%;

        min-width:unset;

        justify-content:center;

        text-align:center;

    }

    .footer-links{

        flex-direction:column;

    }

    .footer-links span{

        display:none;

    }

}

@font-face{
    font-family:"Montserrat";
    src:url("../fonts/Montserrat-Regular.woff2") format("woff2");
    font-weight:400;
}

@font-face{
    font-family:"Montserrat";
    src:url("../fonts/Montserrat-SemiBold.woff2") format("woff2");
    font-weight:600;
}

@font-face{
    font-family:"Montserrat";
    src:url("../fonts/Montserrat-Bold.woff2") format("woff2");
    font-weight:700;
}