*{
    box-sizing:border-box;
}

:root{
    --blue:#119cf7;
    --white:#f8fafc;
    --muted:#c9d6e6;
}

html,
body{
    margin:0;
    min-height:100%;
    background:#02152e;
}

body{
    font-family:Inter,Arial,sans-serif;
    color:var(--white);
}


/* =====================================================
   LANDING PAGE
===================================================== */

.landing{
    min-height:100svh;
    position:relative;
    overflow:hidden;

    display:grid;
    place-items:center;

    padding:54px 34px 76px;

    background:
        radial-gradient(
            circle at 84% 14%,
            rgba(0,128,255,.18),
            transparent 29%
        ),
        radial-gradient(
            circle at 11% 86%,
            rgba(0,128,255,.11),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #011126 0%,
            #03234b 52%,
            #01142d 100%
        );
}


/* =====================================================
   SERVIÇOS — TOPO
===================================================== */

.services{
    position:absolute;
    z-index:6;

    top:12px;
    left:50%;
    transform:translateX(-50%);

    width:max-content;
    max-width:90vw;

    font-family:Inter,sans-serif;
    font-size:.95rem;
    font-weight:400;
    letter-spacing:.06em;

    color:rgba(201,214,230,.42);

    text-align:center;
    white-space:nowrap;
}

.services span{
    margin:0 10px;
    color:rgba(17,156,247,.55);
}


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

.hero{
    position:relative;
    z-index:5;

    width:min(1180px,92vw);
    margin:auto;

    display:grid;
    grid-template-columns:.92fr 1.08fr;
    align-items:center;

    gap:74px;
}


/* =====================================================
   LOGOTIPO
===================================================== */

.hero-brand{
    display:flex;
    justify-content:center;
    align-items:center;

    min-width:0;

    transform:translateY(-20px);
}

.logo{
    display:block;

    width:100%;
    max-width:565px;
    height:auto;

    object-fit:contain;

    transition:
        transform .45s ease,
        filter .45s ease;
}


/* Hover do logotipo */

@media (hover:hover) and (pointer:fine){

    .logo:hover{
        transform:
            translateY(-5px)
            scale(1.015);

        filter:
            drop-shadow(
                0 10px 22px
                rgba(17,156,247,.16)
            );
    }
}


/* =====================================================
   MENSAGEM
===================================================== */

.hero-content{
    display:flex;
    flex-direction:column;

    align-items:flex-start;
    text-align:left;

    min-width:0;
}

.message{
    margin:0;

    font-family:Manrope,sans-serif;

    font-size:clamp(
        2.65rem,
        4.05vw,
        4.05rem
    );

    font-weight:600;
    line-height:1.12;
    letter-spacing:-.035em;

    color:#f6f9fd;
}

.message span{
    display:block;

    transition:
        transform .35s ease,
        color .35s ease;
}

.message .value{
    color:var(--blue);
}


/* Hover individual das linhas */

@media (hover:hover) and (pointer:fine){

    .message span:hover{
        transform:translateX(5px);
    }

    .message .value:hover{
        color:#35adff;
    }
}


/* =====================================================
   LINHA AZUL
===================================================== */

.accent{
    width:96px;
    height:2px;

    margin:38px 0 34px;

    background:var(--blue);

    box-shadow:
        0 0 18px
        rgba(17,156,247,.34);
}


/* =====================================================
   CONTATOS
===================================================== */

.contacts{
    position:absolute;
    z-index:6;

    left:0;
    right:0;
    bottom:98px;

    width:100%;

    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;

    justify-content:center;
    align-items:center;

    gap:16px;

    padding:0 16px;

    font-family:Inter,sans-serif;
    font-size:.95rem;

    white-space:nowrap;
}

.contacts a{
    display:inline-flex;
    align-items:center;

    gap:7px;

    color:rgba(201,214,230,.68);

    text-decoration:none;

    transition:color .25s ease;
}

.contacts a i{
    font-size:.95em;

    color:rgba(17,156,247,.78);

    transition:
        color .25s ease,
        transform .25s ease;
}


/* Hover dos contatos */

@media (hover:hover) and (pointer:fine){

    .contacts a:hover{
        color:#fff;
    }

    .contacts a:hover i{
        color:var(--blue);
        transform:translateY(-1px);
    }
}

.contact-separator{
    display:inline-block;

    color:rgba(17,156,247,.70);
}


/* =====================================================
   RODAPÉ
===================================================== */

footer{
    position:absolute;
    z-index:5;

    left:20px;
    right:20px;
    bottom:22px;

    text-align:center;

    color:rgba(210,224,240,.48);

    font-size:.76rem;
}


/* =====================================================
   ELEMENTOS ABSTRATOS DO FUNDO
===================================================== */

.ambient{
    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    pointer-events:none;
}

.a1{
    width:470px;
    height:470px;

    background:rgba(0,119,255,.13);

    right:-190px;
    top:-150px;
}

.a2{
    width:390px;
    height:390px;

    background:rgba(0,119,255,.09);

    left:-180px;
    bottom:-130px;
}

.flow{
    position:absolute;

    width:125%;
    height:150px;

    left:-12%;

    border-radius:50%;

    border-top:
        1px solid
        rgba(31,157,255,.14);

    pointer-events:none;
}

.f1{
    top:16%;
    transform:rotate(-7deg);
}

.f2{
    bottom:12%;
    transform:rotate(8deg);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

    .hero{
        gap:42px;
    }

    .message{
        font-size:clamp(
            2.15rem,
            5vw,
            3.4rem
        );
    }

    .logo{
        max-width:525px;
    }

    .hero-brand{
        transform:translateY(-10px);
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:760px){

    .landing{
        padding:
            34px
            18px
            110px;
    }


    /* HERO */

    .hero{
        width:100%;

        grid-template-columns:1fr;

        gap:24px;
    }


    /* LOGOTIPO */

    .hero-brand{
        transform:none;
    }

    .logo{
        width:min(620px,96vw);
        max-width:620px;

        margin:auto;
    }


    /* MENSAGEM */

    .hero-content{
        align-items:center;
        text-align:center;
    }

    .message{
        font-size:clamp(
            1.85rem,
            8vw,
            2.8rem
        );

        line-height:1.14;
        letter-spacing:-.025em;
    }


    /* LINHA AZUL
       Mais espaço em relação à mensagem */

    .accent{
        width:82px;

        margin:
            36px auto
            27px;
    }


    /* SERVIÇOS */

    .services{
        top:18px;

        width:90%;

        font-size:.68rem;

        line-height:1.7;

        white-space:normal;
    }

    .services span{
        margin:0 5px;
    }


    /* CONTATOS
       Subimos o bloco para separá-lo do rodapé */

    .contacts{
        bottom:72px;

        padding:0 12px;

        flex-direction:row;
        flex-wrap:nowrap;

        gap:10px;

        font-size:.72rem;

        white-space:nowrap;
    }


    /* RODAPÉ */

    footer{
        bottom:14px;

        font-size:.70rem;
    }
}


/* =====================================================
   MOBILE ESTREITO
   Os contatos passam deliberadamente para duas linhas
===================================================== */

@media(max-width:480px){

    .contacts{
        bottom:72px;

        flex-direction:column;

        gap:7px;

        font-size:.74rem;

        white-space:normal;
    }

    .contact-separator{
        display:none;
    }

    footer{
        bottom:14px;

        font-size:.68rem;
    }
}


/* =====================================================
   MOBILE PEQUENO
===================================================== */

@media(max-width:410px){

    .landing{
        padding-bottom:120px;
    }

    .message{
        font-size:clamp(
            1.65rem,
            8.4vw,
            2.15rem
        );
    }

    .contacts{
        bottom:68px;

        gap:6px;

        font-size:.72rem;
    }

    footer{
        bottom:14px;

        font-size:.66rem;
    }
}


/* =====================================================
   ACESSIBILIDADE — REDUZIR MOVIMENTO
===================================================== */

@media(prefers-reduced-motion:reduce){

    .logo,
    .message span,
    .contacts a,
    .contacts a i{
        transition:none;
    }

    .logo:hover,
    .message span:hover,
    .contacts a:hover i{
        transform:none;
    }
}