.hero {
    position: relative;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    display: flex;

    overflow: hidden;

    flex-direction: column;

    justify-content: space-between;

    background:
        var(--color-navy);

    isolation: isolate;


    --hero-grid-x: 0px;
    --hero-grid-y: 0px;

    --hero-circle-x: 0px;
    --hero-circle-y: 0px;
}


/* =========================================================
   FUNDO
   ========================================================= */

.hero__background {
    position: absolute;

    z-index: -2;

    inset: 0;

    background:

        radial-gradient(
            circle at 78% 25%,
            rgb(0 181 226 / 22%),
            transparent 28rem
        ),

        linear-gradient(
            115deg,
            rgb(0 38 62 / 100%) 10%,
            rgb(0 38 62 / 94%) 48%,
            rgb(0 57 87 / 86%) 100%
        );
}


.hero__background::before {
    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgb(255 255 255 / 4%) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgb(255 255 255 / 4%) 1px,
            transparent 1px
        );

    background-position:

        var(--hero-grid-x)
        var(--hero-grid-y),

        var(--hero-grid-x)
        var(--hero-grid-y);

    background-size:
        5rem 5rem;

    content: "";

    transition:
        background-position
        180ms
        ease-out;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 55%
        );
}


.hero__background::after {
    position: absolute;

    top: 8%;

    right: -12rem;

    width: 38rem;

    height: 38rem;

    border:
        1px solid
        rgb(0 181 226 / 24%);

    border-radius: 50%;

    box-shadow:

        0 0 0 5rem
        rgb(0 181 226 / 3%),

        0 0 0 10rem
        rgb(0 181 226 / 2%);

    content: "";

    transform:
        translate3d(
            var(--hero-circle-x),
            var(--hero-circle-y),
            0
        );

    transition:
        transform
        220ms
        ease-out;

    will-change: transform;
}


/* =========================================================
   REDE INTERATIVA
   ========================================================= */

.hero__network {
    position: absolute;

    z-index: -1;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;
}


/* =========================================================
   CONTEÚDO PRINCIPAL
   ========================================================= */

.hero__container {
    width: 100%;

    display: grid;

    grid-template-columns:

        minmax(
            0,
            1.45fr
        )

        minmax(
            17rem,
            0.55fr
        );

    align-items: center;

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );

    padding-inline:
        clamp(
            2.75rem,
            5vw,
            6rem
        );

    padding-block:
        clamp(
            5rem,
            10vh,
            8rem
        );
}


.hero__content {
    max-width: 54rem;

    color:
        var(--color-white);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hero__eyebrow {
    display: flex;

    align-items: center;

    gap:
        var(--space-2);

    margin-bottom:
        var(--space-3);

    color:
        var(--color-cyan);

    font-size:
        0.8125rem;

    font-weight: 700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.hero__eyebrow-line {
    width: 2.5rem;

    height: 0.125rem;

    background:
        var(--color-orange);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.hero__title {
    max-width: 13ch;

    font-size:
        clamp(
            3rem,
            6.5vw,
            6.5rem
        );

    font-weight: 700;

    letter-spacing:
        -0.045em;

    line-height: 0.96;
}


.hero__title-accent {
    background-image:

        linear-gradient(
            100deg,

            var(--color-cyan) 0%,

            var(--color-cyan) 40%,

            #8de7f5 50%,

            var(--color-cyan) 60%,

            var(--color-cyan) 100%
        );

    background-position:
        100% 0;

    background-size:
        220% 100%;

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        var(--color-cyan);

    -webkit-text-fill-color:
        transparent;
}


/* =========================================================
   DESCRIÇÃO
   ========================================================= */

.hero__description {
    max-width: 43rem;

    margin-top:
        var(--space-4);

    color:
        rgb(
            255 255 255 / 76%
        );

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.25rem
        );

    line-height:
        1.7;
}


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

.hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap:
        var(--space-2);

    margin-top:
        var(--space-4);
}


.hero__actions .button {
    transition:

        transform
        180ms
        ease,

        box-shadow
        180ms
        ease,

        filter
        180ms
        ease,

        border-color
        180ms
        ease,

        background-size
        220ms
        ease;
}


.hero__actions .button:hover,
.hero__actions .button:focus-visible {
    transform:
        translateY(-2px);
}


.button--primary {
    gap:
        0.75rem;

    background:
        var(--color-orange);

    color:
        var(--color-white);
}


.button--primary:hover,
.button--primary:focus-visible {
    box-shadow:

        0
        0.75rem
        1.8rem
        rgb(232 119 34 / 24%);

    filter:
        brightness(0.96);
}


.button__arrow {
    transition:
        transform
        180ms
        ease;
}


.button--primary:hover
.button__arrow,

.button--primary:focus-visible
.button__arrow {
    transform:
        translateX(
            0.35rem
        );
}


.button--secondary {
    background:

        linear-gradient(
            90deg,

            rgb(0 181 226 / 13%),

            rgb(0 181 226 / 7%)
        )

        left /
        0 100%
        no-repeat;

    border:

        1px solid
        rgb(255 255 255 / 38%);

    color:
        var(--color-white);
}


.button--secondary:hover,
.button--secondary:focus-visible {
    background-size:
        100% 100%;

    border-color:
        var(--color-cyan);
}


/* =========================================================
   CARD SISTEMAS ATENDIDOS
   ========================================================= */

.hero__technical-card {
    position: relative;

    padding:
        var(--space-4);

    background:
        rgb(0 38 62 / 48%);

    border:

        1px solid
        rgb(255 255 255 / 14%);

    border-radius:
        var(--radius-medium);

    box-shadow:

        0
        2rem
        5rem
        rgb(0 0 0 / 18%);

    color:
        var(--color-white);

    backdrop-filter:
        blur(1rem);
}


.hero__technical-card::before {
    position: absolute;

    top: -1px;

    left:
        var(--space-4);

    width: 4rem;

    height: 0.1875rem;

    background:
        var(--color-orange);

    content: "";
}


.hero__technical-label {
    margin-bottom:
        var(--space-3);

    color:
        var(--color-cyan);

    font-size:
        0.75rem;

    font-weight: 700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.hero__technical-list {
    display: grid;

    gap: 0;

    padding: 0;

    margin: 0;

    list-style: none;
}


.hero__technical-list li {
    position: relative;

    display: grid;

    grid-template-columns:
        2rem
        1fr;

    align-items: center;

    gap:
        var(--space-2);

    padding-block:
        1rem;

    border-bottom:

        1px solid
        rgb(255 255 255 / 12%);

    border-radius:
        0.35rem;

    transition:

        background-color
        180ms
        ease,

        transform
        180ms
        ease;
}


.hero__technical-list li:hover {
    background:
        rgb(0 181 226 / 7%);

    transform:
        translateX(
            0.35rem
        );
}


.hero__technical-list li::before {
    position: absolute;

    top: 50%;

    left:
        -0.75rem;

    width:
        0.25rem;

    height:
        1.25rem;

    background:
        var(--color-cyan);

    border-radius:
        999px;

    content: "";

    opacity: 0;

    transform:

        translateY(-50%)

        scaleY(0.35);

    transition:

        opacity
        180ms
        ease,

        transform
        180ms
        ease;
}


.hero__technical-list li:hover::before {
    opacity:
        0.85;

    transform:

        translateY(-50%)

        scaleY(1);
}


.hero__technical-list li:last-child {
    border-bottom: 0;
}


.hero__technical-list span {
    color:
        var(--color-orange);

    font-size:
        0.75rem;

    font-weight: 700;

    transition:

        color
        180ms
        ease,

        text-shadow
        180ms
        ease;
}


.hero__technical-list li:hover span {
    color:
        #ff9b52;

    text-shadow:

        0
        0
        1rem
        rgb(232 119 34 / 42%);
}


.hero__technical-list strong {
    font-size:
        0.9375rem;

    transition:
        color
        180ms
        ease;
}


.hero__technical-list li:hover strong {
    color:
        #b9eff9;
}


/* =========================================================
   BARRA INFERIOR
   ========================================================= */

.hero__capabilities {
    border-top:

        1px solid
        rgb(255 255 255 / 12%);

    background:
        rgb(0 25 41 / 55%);
}


.hero__capabilities-content {
    min-height:
        5rem;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        var(--space-2);

    color:
        rgb(255 255 255 / 65%);

    font-size:
        0.75rem;

    font-weight: 700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.hero__capabilities-content span {
    width:
        0.3rem;

    height:
        0.3rem;

    flex:
        0 0 auto;

    background:
        var(--color-cyan);

    border-radius:
        50%;
}


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

@keyframes hero-reveal-up {

    from {
        opacity: 0;

        transform:
            translateY(
                1rem
            );
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes hero-reveal-right {

    from {
        opacity: 0;

        transform:
            translateX(
                1.25rem
            );
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes hero-line-grow {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes hero-accent-sheen {

    from {
        background-position:
            115% 0;
    }

    to {
        background-position:
            -115% 0;
    }

}


/* Entrada dos elementos */

.js .hero__eyebrow,
.js .hero__title,
.js .hero__description,
.js .hero__actions {
    animation:

        hero-reveal-up
        620ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.js .hero__eyebrow {
    animation-delay:
        60ms;
}


.js .hero__title {
    animation-delay:
        150ms;
}


.js .hero__description {
    animation-delay:
        315ms;
}


.js .hero__actions {
    animation-delay:
        440ms;
}


.js .hero__technical-card {
    animation:

        hero-reveal-right
        720ms
        520ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.js .hero__eyebrow-line {
    transform-origin:
        left center;

    animation:

        hero-line-grow
        420ms
        120ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.js .hero__technical-card::before {
    transform-origin:
        left center;

    animation:

        hero-line-grow
        440ms
        770ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.js .hero__title-accent {
    animation:

        hero-accent-sheen
        1.15s
        610ms
        ease-out
        both;
}


/* =========================================================
   INTRODUÇÃO
   ========================================================= */

.home-introduction {
    padding-block:

        clamp(
            5rem,
            10vw,
            9rem
        );

    background:
        var(--color-white);
}


.home-introduction__grid {
    display: grid;

    grid-template-columns:

        1.1fr
        0.9fr;

    gap:

        clamp(
            3rem,
            10vw,
            9rem
        );
}


.section-eyebrow {
    margin-bottom:
        var(--space-2);

    color:
        var(--color-orange);

    font-size:
        0.8125rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.home-introduction__heading h2 {
    max-width:
        16ch;

    color:
        var(--color-navy);

    font-size:

        clamp(
            2rem,
            4vw,
            4rem
        );

    letter-spacing:
        -0.035em;

    line-height:
        1.05;
}


.home-introduction__content {
    align-self:
        end;
}


.home-introduction__content p {
    color:
        var(--color-text-muted);

    font-size:
        1.125rem;

    line-height:
        1.8;
}


.home-introduction__content a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.75rem;

    margin-top:
        var(--space-3);

    color:
        var(--color-navy);

    font-weight:
        700;
}


.home-introduction__content a span {
    color:
        var(--color-orange);
}


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

@media (max-width: 1000px) {

    .hero__container {
        grid-template-columns:
            1fr;
    }


    .hero__technical-card {
        max-width:
            36rem;
    }


    .home-introduction__grid {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 720px) {

    .hero {
        min-height:
            auto;
    }


    .hero__container {
        padding-inline:
            1.25rem;

        padding-block:
            4.5rem;
    }


    .hero__network {
        display:
            none;
    }


    .hero__title {
        font-size:

            clamp(
                2.75rem,
                13vw,
                4.5rem
            );
    }


    .hero__actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .hero__actions .button {
        width:
            100%;
    }


    .hero__capabilities-content {
        min-height:
            auto;

        align-items:
            flex-start;

        flex-direction:
            column;

        padding-block:
            var(--space-3);
    }


    .hero__capabilities-content span {
        display:
            none;
    }

}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none), (pointer: coarse) {

    .hero__network {
        display:
            none;
    }


    .hero__background::before {
        background-position:
            0 0,
            0 0;
    }


    .hero__background::after {
        transform:
            none;
    }

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

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

    .hero__background::before,
    .hero__background::after {
        transition:
            none;
    }


    .hero__network {
        display:
            none;
    }

}