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

:root {
    --brand-blue: #1769ff;
    --brand-navy: #07172d;
    --brand-white: #ffffff;

    --blue: var(--brand-blue);
    --blue-dark: #0f56d9;
    --cyan: #2fc2ff;

    --navy: var(--brand-navy);
    --navy-soft: #0b203a;

    --text: #0a1a2f;
    --text-soft: #59697d;

    --border: #e3ebf4;
    --surface: #ffffff;
    --surface-soft: #f5f9fd;

    --container: 1180px;

    --shadow:
        0 28px 75px
        rgba(28, 61, 102, 0.11);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    min-width: 320px;

    background: var(--surface);
    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width:
        min(
            var(--container),
            calc(100% - 48px)
        );

    margin-inline: auto;
}

/* HEADER */

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;

    border-bottom:
        1px solid
        rgba(222, 231, 242, 0.86);

    background:
        rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(18px);
}

.header-inner {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.brand {
    display: inline-flex;
    align-items: center;

    gap: 11px;
}

.brand-mark {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    color: white;

    font-size: 0.77rem;
    font-weight: 900;

    box-shadow:
        0 8px 20px
        rgba(8, 104, 255, 0.2);
}

.brand > span:last-child {
    display: grid;

    line-height: 1;
}

.brand strong {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.brand small {
    margin-top: 5px;

    color: var(--blue);

    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.main-navigation {
    display: flex;
    align-items: center;

    gap: 28px;
}

.main-navigation > a {
    color: #405168;

    font-size: 0.86rem;
    font-weight: 650;

    transition:
        color 160ms ease;
}

.main-navigation > a:hover {
    color: var(--blue);
}

.header-cta {
    min-height: 42px;

    display: inline-flex;
    align-items: center;

    padding:
        0
        18px;

    border-radius: 10px;

    background: var(--blue);

    color: white !important;

    box-shadow:
        0 10px 25px
        rgba(8, 104, 255, 0.2);
}

/* HERO */

.hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.38;

    background-image:
        linear-gradient(
            rgba(8, 104, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8, 104, 255, 0.05) 1px,
            transparent 1px
        );

    background-size:
        44px
        44px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000 55%
        );
}

.hero-grid {
    position: relative;
    z-index: 2;

    min-height: 690px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.93fr)
        minmax(480px, 1.07fr);

    align-items: center;

    gap: 72px;

    padding:
        85px
        0
        95px;
}

.hero-copy {
    max-width: 610px;
}

.eyebrow,
.section-heading > span {
    color: var(--blue);

    font-size: 0.69rem;
    font-weight: 850;

    letter-spacing: 0.12em;
}

.hero h1 {
    max-width: 680px;

    margin:
        23px
        0
        24px;

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

    line-height: 0.99;

    letter-spacing: -0.06em;
}

.hero h1 strong {
    display: block;

    color: var(--blue);

    font-weight: inherit;
}

.hero-copy > p {
    max-width: 590px;

    margin: 0;

    color: var(--text-soft);

    font-size: 1.06rem;
    line-height: 1.76;
}

.hero-actions {
    margin-top: 32px;

    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.button {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        23px;

    border-radius: 11px;

    font-size: 0.89rem;
    font-weight: 800;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.button:hover {
    transform:
        translateY(-2px);
}

.primary {
    background:
        linear-gradient(
            135deg,
            var(--brand-blue),
            #0f56d9
        );

    color: white;

    box-shadow:
        0 14px 33px
        rgba(8, 104, 255, 0.23);
}

.secondary {
    border:
        1px solid
        #d8e4f0;

    background: white;

    color: #20334b;

    box-shadow:
        0 8px 22px
        rgba(32, 58, 90, 0.05);
}

/* HERO SYSTEM */

.hero-system {
    position: relative;

    perspective: 1200px;
}

.hero-system::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(31, 165, 255, 0.17),
            transparent 68%
        );

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

.system-window {
    position: relative;
    z-index: 2;

    overflow: hidden;

    min-height: 430px;

    border:
        1px solid
        rgba(112, 165, 230, 0.16);

    border-radius: 18px;

    background: #071322;

    box-shadow:
        0 38px 85px
        rgba(5, 30, 63, 0.26);

    transform:
        rotateY(-3deg)
        rotateX(1deg);
}

.system-topbar {
    height: 46px;

    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        0
        15px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    background: #0a1a2d;
}

.system-topbar > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #3c526d;
}

.system-topbar small {
    margin-left: 12px;

    flex: 1;

    padding:
        6px
        10px;

    border-radius: 6px;

    background:
        rgba(255, 255, 255, 0.035);

    color: #607791;

    font-size: 0.58rem;
}

.system-body {
    min-height: 384px;

    display: grid;

    grid-template-columns:
        56px
        1fr;
}

.system-body aside {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 21px;

    padding:
        17px
        0;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.06);

    background: #09182a;
}

.system-body aside strong {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: var(--blue);

    color: white;

    font-size: 0.58rem;
}

.system-body aside i {
    width: 14px;
    height: 14px;

    border:
        1px solid
        #314965;

    border-radius: 4px;
}

.dashboard {
    padding: 25px;
}

.dashboard-title {
    display: grid;

    gap: 6px;

    margin-bottom: 20px;
}

.dashboard-title small {
    color: #647d9a;

    font-size: 0.59rem;
}

.dashboard-title strong {
    color: #f0f6ff;

    font-size: 0.95rem;
}

.metrics {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.metrics article {
    min-width: 0;

    display: grid;

    gap: 7px;

    padding: 15px;

    border:
        1px solid
        rgba(112, 165, 230, 0.11);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #102741,
            #0b1e34
        );
}

.metrics small,
.metrics span {
    color: #6d829d;

    font-size: 0.54rem;
}

.metrics strong {
    overflow: hidden;

    color: #edf5ff;

    font-size: 0.72rem;

    text-overflow: ellipsis;
}

.chart {
    height: 180px;

    display: flex;
    align-items: end;

    gap: 9px;

    margin-top: 12px;

    padding:
        28px
        15px
        14px;

    border:
        1px solid
        rgba(112, 165, 230, 0.1);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #0d2139,
            #091a2e
        );
}

.chart span {
    flex: 1;

    min-width: 5px;

    border-radius:
        4px
        4px
        1px
        1px;

    background:
        linear-gradient(
            to top,
            #0768ff,
            #35c4ff
        );
}

/* SECTIONS */

.section {
    padding:
        110px
        0;
}

.section-heading {
    max-width: 760px;

    margin-bottom: 50px;
}

.section-heading h2,
.about h2 {
    margin:
        15px
        0
        16px;

    font-size:
        clamp(
            2rem,
            3.7vw,
            3.25rem
        );

    line-height: 1.07;

    letter-spacing: -0.045em;
}

.section-heading h2 strong,
.about h2 strong {
    color: var(--blue);

    font-weight: inherit;
}

.section-heading p,
.about p {
    max-width: 620px;

    color: var(--text-soft);

    line-height: 1.75;
}

.cards {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;
}

.cards article {
    min-height: 230px;

    padding: 28px;

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

    border-radius: 17px;

    background: white;

    box-shadow:
        0 12px 38px
        rgba(34, 67, 106, 0.05);
}

.cards article > span {
    color: #a8b8ca;

    font-size: 0.67rem;
    font-weight: 850;
}

.cards h3 {
    margin:
        34px
        0
        12px;

    font-size: 1.16rem;
}

.cards p {
    margin: 0;

    color: var(--text-soft);

    font-size: 0.9rem;
    line-height: 1.7;
}

/* DARK PROCESS */

.dark-section {
    position: relative;

    overflow: hidden;

    padding:
        110px
        0;

    background:
        linear-gradient(
            135deg,
            #06101d,
            #0a2038
        );

    color: white;
}

.dark-section::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.3;

    background-image:
        linear-gradient(
            rgba(78, 155, 242, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(78, 155, 242, 0.06) 1px,
            transparent 1px
        );

    background-size:
        46px
        46px;
}

.dark-section > .container {
    position: relative;
    z-index: 2;
}

.section-heading.dark > span {
    color: #56adff;
}

.section-heading.dark h2 strong {
    color: #5ab7ff;
}

.process {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 14px;
}

.process article {
    min-height: 175px;

    padding: 23px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.035);
}

.process article > span {
    color: #4ba7ff;

    font-size: 0.66rem;
    font-weight: 850;
}

.process h3 {
    margin:
        28px
        0
        9px;

    font-size: 1rem;
}

.process p {
    margin: 0;

    color: #8da2bb;

    font-size: 0.79rem;
    line-height: 1.6;
}

/* PRODUCT */

.product-panel {
    min-height: 250px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;

    padding:
        48px
        55px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #eef6ff
        );

    box-shadow: var(--shadow);
}

.product-panel h2 {
    margin:
        13px
        0
        12px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    letter-spacing: -0.05em;
}

.product-panel p {
    max-width: 600px;

    margin: 0;

    color: var(--text-soft);

    line-height: 1.7;
}

/* ABOUT */

.about {
    background: var(--surface-soft);
}

.about .container {
    max-width: 850px;
}

.about > .container > p {
    font-size: 1.02rem;
}

/* CTA */

.cta {
    padding:
        40px
        0
        110px;

    background: var(--surface-soft);
}

.cta-inner {
    min-height: 260px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 55px;

    padding:
        50px
        58px;

    border-radius: 22px;

    background:
        linear-gradient(
            125deg,
            #0870ff,
            #0450c6
        );

    color: white;

    box-shadow:
        0 27px 65px
        rgba(8, 104, 255, 0.22);
}

.cta-inner > div > span {
    color: #bddcff;

    font-size: 0.67rem;
    font-weight: 850;

    letter-spacing: 0.11em;
}

.cta-inner h2 {
    max-width: 680px;

    margin:
        13px
        0
        0;

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

    line-height: 1.08;

    letter-spacing: -0.04em;
}

.white {
    flex-shrink: 0;

    background: white;

    color: #075cdc;
}

/* FOOTER */

.footer {
    padding:
        65px
        0
        28px;

    background: #06101d;

    color: white;
}

.footer strong {
    font-size: 0.9rem;

    letter-spacing: 0.08em;
}

.footer p {
    max-width: 370px;

    margin:
        14px
        0
        38px;

    color: #8195ad;

    font-size: 0.85rem;
}

.footer small {
    color: #5f748d;

    font-size: 0.7rem;
}

/* RESPONSIVO */

@media (max-width: 940px) {
    .main-navigation {
        gap: 16px;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }

    .hero-copy {
        max-width: 720px;
    }

    .hero-system {
        width:
            min(
                700px,
                100%
            );

        margin-inline: auto;
    }

    .process {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 760px) {
    .container {
        width:
            min(
                100% - 32px,
                var(--container)
            );
    }

    .header-inner {
        min-height: 70px;
    }

    .main-navigation > a:not(.header-cta) {
        display: none;
    }

    .hero-grid {
        min-height: auto;

        padding:
            65px
            0
            75px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.7rem,
                12.5vw,
                4rem
            );
    }

    .hero-actions {
        display: grid;
    }

    .button {
        width: 100%;
    }

    .system-window {
        min-height: 340px;

        transform: none;
    }

    .system-body {
        min-height: 294px;

        grid-template-columns:
            44px
            1fr;
    }

    .dashboard {
        padding: 14px;
    }

    .metrics {
        gap: 6px;
    }

    .metrics article {
        padding:
            10px
            8px;
    }

    .metrics span {
        display: none;
    }

    .chart {
        height: 130px;
    }

    .section,
    .dark-section {
        padding:
            80px
            0;
    }

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

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

    .process article {
        min-height: auto;
    }

    .product-panel,
    .cta-inner {
        align-items: flex-start;
        flex-direction: column;

        padding:
            38px
            26px;
    }
}

/* =========================================
   REFINAMENTO HOME V0.2
   ========================================= */

/* HERO */

.hero-grid {
    min-height: 620px;

    grid-template-columns:
        minmax(0, 0.98fr)
        minmax(470px, 1.02fr);

    gap: 58px;

    padding:
        70px
        0
        76px;
}

.hero h1 {
    max-width: 620px;

    margin:
        20px
        0
        22px;

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

    line-height: 1;

    letter-spacing: -0.058em;
}

.hero-copy > p {
    max-width: 545px;

    font-size: 1.02rem;
    line-height: 1.72;
}

.hero-actions {
    margin-top: 28px;
}

.system-window {
    min-height: 410px;

    box-shadow:
        0 40px 95px
        rgba(5, 30, 63, 0.3),
        0 0 70px
        rgba(8, 104, 255, 0.06);
}

.system-body {
    min-height: 364px;
}

.chart {
    height: 160px;
}

.hero-system::after {
    content:
        "PROCESSO MAPEADO\A"
        "Solução conectada ao negócio";

    position: absolute;

    z-index: 6;

    bottom: -22px;
    left: -27px;

    min-width: 205px;

    padding:
        13px
        16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 11px;

    background:
        rgba(8, 25, 45, 0.94);

    color: #ecf5ff;

    box-shadow:
        0 18px 38px
        rgba(4, 25, 52, 0.23);

    backdrop-filter:
        blur(12px);

    white-space: pre;

    font-size: 0.67rem;
    font-weight: 800;

    line-height: 1.65;
    letter-spacing: 0.025em;
}

/* DESAFIOS */

.pain-section {
    position: relative;

    padding:
        76px
        0
        88px;

    border-top:
        1px solid
        #e7eef7;

    border-bottom:
        1px solid
        #e5edf6;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f3f8fd 100%
        );
}

.pain-heading {
    max-width: 860px;

    margin:
        0
        auto
        42px;

    text-align: center;
}

.pain-heading h2 {
    margin:
        13px
        0
        12px;

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

    line-height: 1.05;

    letter-spacing: -0.045em;
}

.pain-heading h2 strong {
    color: var(--blue);

    font-weight: inherit;
}

.pain-heading p {
    max-width: 680px;

    margin:
        0
        auto;

    color: var(--text-soft);

    font-size: 0.92rem;
    line-height: 1.7;
}

.pain-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 13px;
}

.pain-card {
    min-width: 0;
    min-height: 218px;

    padding:
        22px
        18px;

    border:
        1px solid
        #dfe9f4;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 10px 30px
        rgba(33, 67, 107, 0.04);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.pain-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(8, 104, 255, 0.24);

    box-shadow:
        0 20px 45px
        rgba(27, 69, 119, 0.1);
}

.pain-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #edf5ff;

    color: var(--blue);

    font-size: 1rem;
    font-weight: 900;
}

.pain-card:first-child .pain-icon {
    background: #ebfbf4;

    color: #13a56d;
}

.pain-card h3 {
    margin:
        24px
        0
        9px;

    color: #13243a;

    font-size: 0.91rem;

    line-height: 1.25;
    letter-spacing: -0.018em;
}

.pain-card p {
    margin: 0;

    color: #65758a;

    font-size: 0.75rem;
    line-height: 1.55;
}

/* SOLUÇÕES MAIS PRÓXIMAS DA SEÇÃO ANTERIOR */

.pain-section + .section {
    padding-top: 90px;
}

/* RESPONSIVIDADE V0.2 */

@media (max-width: 1100px) {
    .pain-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 940px) {
    .hero-grid {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 70px;
    }

    .hero-system::after {
        left: 18px;
    }
}

@media (max-width: 760px) {
    .hero-grid {
        padding:
            58px
            0
            72px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.55rem,
                12vw,
                3.85rem
            );
    }

    .hero-system::after {
        display: none;
    }

    .pain-section {
        padding:
            65px
            0
            70px;
    }

    .pain-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 520px) {
    .pain-grid {
        grid-template-columns: 1fr;
    }

    .pain-card {
        min-height: auto;
    }
}

/* =========================================
   HOME V0.3 — SOLUCOES
   ========================================= */

.solutions-section {
    position: relative;

    padding:
        96px
        0
        108px;

    overflow: hidden;
}

.solutions-section::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -260px;
    right: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8, 104, 255, 0.08),
            rgba(8, 104, 255, 0)
            68%
        );

    pointer-events: none;
}

.solutions-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;

    margin-top: 44px;
}

.solution-card {
    position: relative;

    min-height: 285px;

    padding:
        28px
        26px;

    border:
        1px solid
        #e0e9f4;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfdff 100%
        );

    box-shadow:
        0 14px 38px
        rgba(23, 55, 91, 0.045);

    overflow: hidden;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.solution-card::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -48px;
    bottom: -55px;

    border-radius: 50%;

    background:
        rgba(8, 104, 255, 0.04);

    transition:
        transform 220ms ease;
}

.solution-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(8, 104, 255, 0.28);

    box-shadow:
        0 24px 55px
        rgba(24, 69, 121, 0.1);
}

.solution-card:hover::after {
    transform:
        scale(1.35);
}

.solution-number {
    position: absolute;

    top: 25px;
    right: 25px;

    color: #aab9ca;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.solution-icon {
    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    border:
        1px solid
        #d8e8fb;

    border-radius: 13px;

    background:
        #edf5ff;

    color:
        var(--blue);

    font-size: 1.05rem;
    font-weight: 900;
}

.solution-card h3 {
    max-width: 240px;

    margin:
        28px
        0
        12px;

    color:
        #11243b;

    font-size:
        1.05rem;

    line-height:
        1.3;

    letter-spacing:
        -0.025em;
}

.solution-card p {
    max-width: 300px;

    margin: 0;

    color:
        #65758a;

    font-size:
        0.83rem;

    line-height:
        1.65;
}

.solutions-footer {
    display: flex;

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

    gap: 35px;

    margin-top: 35px;

    padding:
        23px
        26px;

    border:
        1px solid
        #e1eaf4;

    border-radius:
        15px;

    background:
        #f8fbff;
}

.solutions-footer p {
    max-width: 610px;

    margin: 0;

    color:
        #66768a;

    font-size:
        0.82rem;

    line-height:
        1.6;
}

.text-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--blue);

    font-size:
        0.8rem;

    font-weight:
        800;

    text-decoration:
        none;

    white-space:
        nowrap;
}

.text-link span {
    transition:
        transform
        160ms ease;
}

.text-link:hover span {
    transform:
        translateX(4px);
}

@media (max-width: 940px) {
    .solutions-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 650px) {
    .solutions-section {
        padding:
            75px
            0
            82px;
    }

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

    .solution-card {
        min-height:
            auto;
    }

    .solutions-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}

/* =========================================
   HOME V0.3 - ENGENHARIA E ECOSSISTEMA
   ========================================= */

.engineering-section {
    position: relative;
    overflow: hidden;
}

.engineering-section::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -350px;
    right: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47, 194, 255, 0.1),
            rgba(47, 194, 255, 0)
            68%
        );

    pointer-events: none;
}

.section-heading.dark p {
    max-width: 610px;

    margin-top: 16px;

    color:
        rgba(227, 239, 252, 0.65);

    font-size: 0.88rem;
    line-height: 1.7;
}

.engineering-divider {
    height: 1px;

    margin:
        58px
        0;

    background:
        rgba(255, 255, 255, 0.09);
}

.engineering-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.7fr);

    align-items: end;

    gap: 70px;
}

.engineering-label {
    color:
        #52c8ff;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;
}

.engineering-intro h3 {
    max-width: 620px;

    margin:
        14px
        0
        0;

    color:
        #ffffff;

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

    line-height:
        1.06;

    letter-spacing:
        -0.045em;
}

.engineering-intro h3 strong {
    color:
        #51c7ff;

    font-weight:
        inherit;
}

.engineering-intro > p {
    margin: 0;

    color:
        rgba(220, 234, 249, 0.66);

    font-size:
        0.86rem;

    line-height:
        1.75;
}

.engineering-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top:
        40px;
}

.engineering-card {
    min-height:
        225px;

    padding:
        24px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        15px;

    background:
        rgba(255, 255, 255, 0.035);
}

.engineering-card > span {
    color:
        #43c4ff;

    font-size:
        0.65rem;

    font-weight:
        800;
}

.engineering-card h4 {
    margin:
        37px
        0
        12px;

    color:
        #f2f7fd;

    font-size:
        0.95rem;

    line-height:
        1.35;
}

.engineering-card p {
    margin: 0;

    color:
        rgba(216, 230, 245, 0.58);

    font-size:
        0.76rem;

    line-height:
        1.65;
}

/* ECOSSISTEMA */

.ecosystem-section {
    padding:
        110px
        0
        115px;

    background:
        #f7faff;
}

.ecosystem-heading {
    max-width:
        760px;
}

.ecosystem-feature {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.72fr)
        minmax(0, 1.28fr);

    align-items:
        center;

    gap:
        64px;

    margin-top:
        48px;

    padding:
        55px;

    border:
        1px solid
        #dce8f5;

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f9ff 100%
        );

    box-shadow:
        0 28px 70px
        rgba(23, 58, 101, 0.08);
}

.ecosystem-badge,
.ecosystem-type {
    display:
        inline-flex;

    color:
        var(--blue);

    font-size:
        0.64rem;

    font-weight:
        850;

    letter-spacing:
        0.14em;
}

.ecosystem-feature-copy h3 {
    margin:
        14px
        0
        14px;

    color:
        #0a1b31;

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.8rem
        );

    line-height:
        0.95;

    letter-spacing:
        -0.06em;
}

.ecosystem-feature-copy p {
    max-width:
        440px;

    margin: 0;

    color:
        #647489;

    font-size:
        0.9rem;

    line-height:
        1.7;
}

.ecosystem-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        28px;
}

.ecosystem-tags span {
    padding:
        7px
        10px;

    border:
        1px solid
        #d8e5f3;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #64758b;

    font-size:
        0.65rem;

    font-weight:
        700;
}

/* MOCKUP AVYGEN */

.avygen-visual {
    position:
        relative;

    min-width:
        0;
}

.avygen-window {
    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        17px;

    background:
        #071626;

    box-shadow:
        0 32px 65px
        rgba(7, 25, 46, 0.25);
}

.avygen-topbar {
    height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        0
        16px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.07);
}

.avygen-topbar > span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.2);
}

.avygen-topbar strong {
    margin-left:
        auto;

    color:
        rgba(255, 255, 255, 0.6);

    font-size:
        0.62rem;

    letter-spacing:
        0.14em;
}

.avygen-body {
    min-height:
        310px;

    display:
        grid;

    grid-template-columns:
        60px
        1fr;
}

.avygen-sidebar {
    display:
        flex;

    align-items:
        center;

    flex-direction:
        column;

    gap:
        16px;

    padding-top:
        22px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.06);
}

.avygen-sidebar i {
    width:
        21px;

    height:
        21px;

    border-radius:
        6px;

    background:
        rgba(73, 176, 255, 0.13);
}

.avygen-content {
    padding:
        23px;
}

.avygen-row {
    display:
        grid;

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

    gap:
        10px;
}

.avygen-row span {
    height:
        55px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, 0.035);
}

.avygen-chart {
    height:
        120px;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        9px;

    margin-top:
        14px;

    padding:
        18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, 0.025);
}

.avygen-chart i {
    flex:
        1;

    border-radius:
        4px
        4px
        2px
        2px;

    background:
        linear-gradient(
            180deg,
            #2fc2ff,
            #1769ff
        );
}

.avygen-chart i:nth-child(1) {
    height: 34%;
}

.avygen-chart i:nth-child(2) {
    height: 58%;
}

.avygen-chart i:nth-child(3) {
    height: 46%;
}

.avygen-chart i:nth-child(4) {
    height: 76%;
}

.avygen-chart i:nth-child(5) {
    height: 63%;
}

.avygen-chart i:nth-child(6) {
    height: 92%;
}

.avygen-table {
    display:
        grid;

    gap:
        7px;

    margin-top:
        13px;
}

.avygen-table span {
    height:
        8px;

    border-radius:
        4px;

    background:
        rgba(255, 255, 255, 0.075);
}

.avygen-table span:nth-child(2) {
    width: 87%;
}

.avygen-table span:nth-child(3) {
    width: 94%;
}

.avygen-table span:nth-child(4) {
    width: 73%;
}

/* CARDS DO ECOSSISTEMA */

.ecosystem-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        17px;

    margin-top:
        18px;
}

.ecosystem-card {
    min-height:
        285px;

    display:
        flex;

    align-items:
        flex-start;

    flex-direction:
        column;

    padding:
        28px;

    border:
        1px solid
        #dfe8f2;

    border-radius:
        18px;

    background:
        #ffffff;
}

.ecosystem-card h3 {
    margin:
        31px
        0
        5px;

    color:
        #10243a;

    font-size:
        1.7rem;

    letter-spacing:
        -0.04em;
}

.ecosystem-card > strong {
    color:
        #263d57;

    font-size:
        0.78rem;
}

.ecosystem-card p {
    margin:
        16px
        0
        25px;

    color:
        #68798d;

    font-size:
        0.78rem;

    line-height:
        1.65;
}

.ecosystem-status {
    margin-top:
        auto;

    padding:
        7px
        10px;

    border-radius:
        8px;

    background:
        #eef5fd;

    color:
        #62758c;

    font-size:
        0.63rem;

    font-weight:
        750;
}

.ecosystem-card-muted {
    background:
        #f9fbfd;
}

@media (max-width: 940px) {
    .engineering-intro,
    .ecosystem-feature {
        grid-template-columns:
            1fr;
    }

    .engineering-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

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

@media (max-width: 650px) {
    .engineering-grid {
        grid-template-columns:
            1fr;
    }

    .ecosystem-section {
        padding:
            78px
            0;
    }

    .ecosystem-feature {
        padding:
            28px;
    }

    .avygen-body {
        grid-template-columns:
            45px
            1fr;
    }
}

/* =========================================
   HOME V0.4 - SEGMENTOS
   ========================================= */

.segments-section {
    position: relative;
    padding: 105px 0 110px;
    background: #ffffff;
}

.segments-heading {
    max-width: 760px;
}

.segments-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 46px;
}

.segment-card {
    min-height: 225px;
    padding: 26px;
    border: 1px solid #e2eaf3;
    border-radius: 17px;
    background: #fbfdff;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.segment-card:hover {
    transform: translateY(-5px);
    border-color: rgba(8, 104, 255, 0.26);
    box-shadow: 0 22px 50px rgba(25, 67, 115, 0.08);
}

.segment-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--blue);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.segment-card h3 {
    margin: 26px 0 10px;
    color: #13253b;
    font-size: 0.98rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.segment-card p {
    margin: 0;
    color: #6a7a8e;
    font-size: 0.78rem;
    line-height: 1.65;
}

.segments-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 30px;
    margin-top: 26px;
    padding: 22px 25px;
    border: 1px solid #dfe9f4;
    border-radius: 14px;
    background: #f7faff;
}

.segments-note strong {
    color: #172b43;
    font-size: 0.82rem;
}

.segments-note p {
    margin: 0;
    color: #6b7a8d;
    font-size: 0.75rem;
    line-height: 1.55;
}

.segments-note a {
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 940px) {
    .segments-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .segments-note {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .segments-section {
        padding: 78px 0;
    }

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

    .segment-card {
        min-height: auto;
    }
}

/* =========================================
   HOME V0.4 - SOBRE, FAQ, CTA E FOOTER
   ========================================= */

.about-v04 {
    padding: 110px 0;
    background: #f7faff;
}

.about-v04-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);
    gap: 90px;
    align-items: center;
}

.about-v04-copy h2 {
    max-width: 620px;
    margin: 15px 0 22px;
    font-size: clamp(2.35rem, 4vw, 3.9rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.about-v04-copy h2 strong {
    color: var(--blue);
    font-weight: inherit;
}

.about-v04-copy p {
    max-width: 590px;
    margin: 0 0 15px;
    color: #637489;
    font-size: 0.9rem;
    line-height: 1.75;
}

.about-v04-copy .text-link {
    margin-top: 16px;
}

.about-v04-principles {
    display: grid;
    gap: 12px;
}

.about-v04-principles article {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 18px;
    padding: 23px;
    border: 1px solid #dfe8f3;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 13px 35px rgba(28, 65, 108, 0.04);
}

.about-v04-principles article > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    border-radius: 11px;
    background: #edf5ff;
    color: var(--blue);
    font-size: 0.66rem;
    font-weight: 850;
}

.about-v04-principles h3 {
    margin: 0 0 7px;
    color: #172a41;
    font-size: 0.94rem;
}

.about-v04-principles p {
    margin: 0;
    color: #69798d;
    font-size: 0.76rem;
    line-height: 1.6;
}

.faq-section {
    padding: 110px 0;
    background: #ffffff;
}

.faq-layout {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(0, 1.28fr);
    gap: 95px;
}

.faq-heading {
    position: sticky;
    top: 120px;
    align-self: start;
}

.faq-heading h2 {
    max-width: 480px;
    margin: 15px 0 18px;
    color: #10233a;
    font-size: clamp(2rem, 3.3vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.faq-heading h2 strong {
    color: var(--blue);
    font-weight: inherit;
}

.faq-heading > p {
    max-width: 470px;
    margin: 0;
    color: #68798d;
    font-size: 0.84rem;
    line-height: 1.7;
}

.faq-list {
    border-top: 1px solid #e0e8f1;
}

.faq-list details {
    border-bottom: 1px solid #e0e8f1;
}

.faq-list summary {
    position: relative;
    padding: 23px 44px 23px 0;
    color: #162a42;
    cursor: pointer;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.45;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    color: var(--blue);
    font-size: 1.2rem;
    font-weight: 400;
}

.faq-list details[open] summary::after {
    content: "−";
}

.faq-list details p {
    max-width: 690px;
    margin: -5px 0 24px;
    color: #68798d;
    font-size: 0.8rem;
    line-height: 1.75;
}

.cta-v04 {
    padding: 0;
    background: #ffffff;
}

.cta-v04-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 65px;
    padding: 58px 62px;
    border-radius: 24px;
    background:
        linear-gradient(
            125deg,
            #0564f0 0%,
            #0879ff 58%,
            #24b4ff 100%
        );
    box-shadow:
        0 30px 75px
        rgba(5, 84, 190, 0.22);
}

.cta-v04-inner > div:first-child > span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.13em;
}

.cta-v04-inner h2 {
    max-width: 660px;
    margin: 12px 0 13px;
    color: #ffffff;
    font-size: clamp(2rem, 3.5vw, 3.35rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.cta-v04-inner h2 strong {
    color: #dff5ff;
    font-weight: inherit;
}

.cta-v04-inner p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.82rem;
    line-height: 1.7;
}

.cta-v04-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 13px;
}

.cta-secondary {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.73rem;
    font-weight: 750;
}

.footer-v04 {
    margin-top: 80px;
    padding: 75px 0 28px;
    background: #061321;
    color: #ffffff;
}

.footer-v04-main {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.35fr)
        repeat(3, minmax(140px, 0.65fr));
    gap: 55px;
    padding-bottom: 55px;
}

.footer-v04-brand > a {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.footer-v04-brand > a strong {
    color: #ffffff;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
}

.footer-v04-brand > a span {
    color: #53bfff;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.27em;
}

.footer-v04-brand p {
    max-width: 300px;
    margin: 22px 0 9px;
    color: rgba(235, 244, 255, 0.75);
    font-size: 0.82rem;
    line-height: 1.65;
}

.footer-v04-brand small {
    color: rgba(207, 224, 242, 0.42);
    font-size: 0.68rem;
}

.footer-v04-column {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
}

.footer-v04-column > strong {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 0.73rem;
    letter-spacing: 0.05em;
}

.footer-v04-column a,
.footer-v04-column span {
    color: rgba(213, 228, 244, 0.58);
    font-size: 0.71rem;
    line-height: 1.45;
}

.footer-v04-column a {
    transition: color 150ms ease;
}

.footer-v04-column a:hover {
    color: #58c4ff;
}

.footer-v04-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 24px;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
    color: rgba(205, 221, 239, 0.43);
    font-size: 0.66rem;
}

@media (max-width: 940px) {
    .about-v04-grid,
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .faq-heading {
        position: static;
    }

    .cta-v04-inner {
        grid-template-columns: 1fr;
    }

    .cta-v04-actions {
        align-items: flex-start;
    }

    .footer-v04-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .about-v04,
    .faq-section {
        padding: 78px 0;
    }

    .about-v04-grid {
        gap: 42px;
    }

    .cta-v04-inner {
        padding: 38px 27px;
        border-radius: 18px;
    }

    .footer-v04 {
        margin-top: 55px;
        padding-top: 58px;
    }

    .footer-v04-main {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .footer-v04-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   HOME V0.4.1 - IDENTIDADE NEXO FORTE
   ========================================= */

.brand-logo {
    display: block;
    width: auto;
    height: auto;
}

.brand-logo-header {
    width: 168px;
    max-width: 100%;
}

.footer-v04-brand > a {
    display: inline-block;
}

.brand-logo-footer {
    width: 205px;
    max-width: 100%;
}

@media (max-width: 650px) {
    .brand-logo-header {
        width: 148px;
    }

    .brand-logo-footer {
        width: 185px;
    }
}

/* =========================================
   HOME V0.5 - TIPOGRAFIA INSTITUCIONAL
   ========================================= */

@font-face {
    font-family: "Inter";
    src:
        url("/assets/fonts/inter/inter-variable.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Sora";
    src:
        url("/assets/fonts/sora/sora-variable.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
}

:root {
    --font-body:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display:
        "Sora",
        "Inter",
        system-ui,
        sans-serif;
}

body {
    font-family: var(--font-body);
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-synthesis: none;
}

/* =========================================
   HOME V0.5.1 - REFINAMENTO TIPOGRAFICO
   ========================================= */

/* Titulos principais - Sora */
.hero h1,
.section-heading h2,
.engineering-intro h3,
.about-v04-copy h2,
.faq-heading h2,
.cta-v04-inner h2 {
    font-weight: 800;
}

/* Titulos de componentes - Sora */
.cards h3,
.process h3,
.solution-card h3,
.engineering-card h3,
.ecosystem-card h3,
.segment-card h3,
.about-v04-principles h3 {
    font-weight: 700;
}

/* Legibilidade de textos secundarios */
.solution-card p {
    color: #586a80;
    font-size: 0.84rem;
}

.engineering-card p {
    color: rgba(226, 238, 250, 0.72);
    font-size: 0.82rem;
}

.ecosystem-card p {
    color: #5f7186;
    font-size: 0.82rem;
}

.segment-card p {
    color: #5f7186;
    font-size: 0.82rem;
}

.about-v04-copy p {
    color: #5f7186;
}

.about-v04-principles p {
    color: #5f7186;
    font-size: 0.8rem;
}

.faq-heading > p {
    color: #5f7186;
    font-size: 0.88rem;
}

.faq-list details p {
    color: #5f7186;
    font-size: 0.84rem;
}

/* =========================================
   HOME V0.5.2 - NAVEGACAO MOBILE
   ========================================= */

.menu-toggle {
    width: 44px;
    height: 44px;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    padding: 0;

    border: 1px solid #dce6f2;
    border-radius: 11px;

    background: #ffffff;

    cursor: pointer;
}

.menu-toggle span {
    width: 19px;
    height: 2px;

    display: block;

    border-radius: 999px;

    background: var(--navy);

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

@media (max-width: 760px) {

    .header-inner {
        position: relative;
    }

    .menu-js .menu-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }

    .menu-js .main-navigation {
        position: absolute;

        top: calc(100% + 1px);
        left: 0;
        right: 0;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        padding: 12px;

        border:
            1px solid
            #dfe8f3;

        border-radius:
            0 0 16px 16px;

        background:
            rgba(255, 255, 255, 0.98);

        box-shadow:
            0 24px 55px
            rgba(18, 45, 79, 0.14);

        backdrop-filter:
            blur(18px);
    }

    .menu-js .main-navigation.is-open {
        display: flex;
    }

    .menu-js .main-navigation.is-open > a,
    .menu-js .main-navigation.is-open > a:not(.header-cta) {
        min-height: 44px;

        display: flex;
        align-items: center;

        padding:
            0 14px;

        border-radius: 9px;
    }

    .menu-js .main-navigation.is-open > a:not(.header-cta):hover {
        background: #f3f7fc;
    }

    .menu-js .main-navigation .header-cta {
        justify-content: center;

        margin-top: 6px;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }
}

/* =========================================
   HOME V0.5.2.1 - ECOSSISTEMA E AVYGEN REAL
   ========================================= */

.ecosystem-group-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 30px;

    margin-top: 46px;
    margin-bottom: 16px;

    padding-bottom: 14px;

    border-bottom:
        1px solid
        #dce6f1;
}

.ecosystem-group-heading > span {
    color: var(--blue);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.ecosystem-group-heading > p {
    margin: 0;

    color: #65758a;

    font-size: 0.78rem;
    line-height: 1.6;
}

.ecosystem-group-spacing {
    margin-top: 55px;
}

.ecosystem-feature-live {
    margin-top: 0;

    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(0, 1.28fr);

    overflow: hidden;
}

.ecosystem-badge-live {
    color: #137a54;
}

.ecosystem-feature-subtitle {
    display: block;

    max-width: 440px;

    margin:
        -2px
        0
        15px;

    color: #263d57;

    font-size: 0.9rem;
    line-height: 1.5;
}

.ecosystem-product-link {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 28px;

    padding:
        0
        18px;

    border-radius: 11px;

    background: var(--blue);

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 750;

    box-shadow:
        0 12px 28px
        rgba(23, 105, 255, 0.2);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ecosystem-product-link:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 34px
        rgba(23, 105, 255, 0.26);
}

.ecosystem-showcase-media {
    display: block;

    overflow: hidden;

    border:
        1px solid
        rgba(14, 36, 67, 0.12);

    border-radius: 18px;

    background: #07172d;

    box-shadow:
        0 28px 60px
        rgba(7, 23, 45, 0.2);
}

.ecosystem-showcase-media img {
    width: 100%;
    height: auto;

    display: block;

    aspect-ratio: 1672 / 941;

    object-fit: cover;

    transition:
        transform 350ms ease;
}

.ecosystem-showcase-media:hover img {
    transform: scale(1.018);
}

.ecosystem-grid-development,
.ecosystem-grid-internal {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin-top: 0;
}

.ecosystem-card-internal {
    background: #f8fafc;
}

.ecosystem-status-development {
    background: #fff5e8;
    color: #9b651d;
}

@media (max-width: 940px) {

    .ecosystem-feature-live {
        grid-template-columns: 1fr;
    }

    .ecosystem-grid-development,
    .ecosystem-grid-internal {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {

    .ecosystem-group-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }

    .ecosystem-feature-live {
        padding: 26px;
    }

    .ecosystem-feature-copy h3 {
        font-size:
            clamp(
                2.6rem,
                15vw,
                3.8rem
            );
    }

    .ecosystem-product-link {
        width: 100%;
    }

    .ecosystem-showcase-media {
        border-radius: 13px;
    }
}

/* =========================================
   HOME V0.5.2.2 - HERO VISUAL NEXO FORTE
   ========================================= */

.hero-visual {
    position: relative;

    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-visual::before {
    content: "";

    position: absolute;

    width: 82%;
    aspect-ratio: 1;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 105, 255, 0.14),
            rgba(47, 194, 255, 0.055) 42%,
            transparent 70%
        );

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

    pointer-events: none;
}

.hero-visual img {
    position: relative;
    z-index: 2;

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

    display: block;

    border-radius: 24px;

    filter:
        drop-shadow(
            0 30px 42px
            rgba(7, 23, 45, 0.16)
        );
}

@media (max-width: 940px) {

    .hero-visual {
        width: min(760px, 100%);
        margin-inline: auto;
    }

    .hero-visual img {
        max-width: 760px;
    }
}

@media (max-width: 760px) {

    .hero-visual img {
        border-radius: 18px;

        filter:
            drop-shadow(
                0 20px 30px
                rgba(7, 23, 45, 0.13)
            );
    }
}

/* =========================================
   HOME V0.5.3 - ACESSIBILIDADE E ACABAMENTO
   ========================================= */

/* Foco visível para navegação por teclado */

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline:
        3px solid
        rgba(23, 105, 255, 0.48);

    outline-offset: 3px;
}

.button:focus-visible,
.header-cta:focus-visible,
.ecosystem-product-link:focus-visible {
    outline-color: #1769ff;

    box-shadow:
        0 0 0 4px
        rgba(23, 105, 255, 0.14),
        0 14px 32px
        rgba(23, 105, 255, 0.18);
}

.ecosystem-showcase-media:focus-visible {
    outline-offset: 5px;
}


/* Navegação principal */

.main-navigation
> a:not(.header-cta):hover,
.main-navigation
> a:not(.header-cta):focus-visible {
    color: var(--brand-blue);

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}


/* Botão do menu mobile */

.menu-toggle:hover {
    border-color:
        rgba(23, 105, 255, 0.32);

    background: #f7faff;
}

.menu-toggle:focus-visible {
    border-color: var(--brand-blue);
}


/* Links do rodapé */

.footer-v04-column a:hover,
.footer-v04-column a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* AVYGEN */

.ecosystem-showcase-media:focus-visible img {
    transform: scale(1.018);
}


/* Respeito à preferência do usuário por menos movimento */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }

    .button:hover,
    .pain-card:hover,
    .solution-card:hover,
    .segment-card:hover,
    .ecosystem-product-link:hover,
    .ecosystem-showcase-media:hover img,
    .ecosystem-showcase-media:focus-visible img {
        transform: none;
    }
}

/* =========================================
   HOME V0.5.4 - CONTRASTE RODAPE
   ========================================= */

.footer-v04-brand p {
    color: rgba(235, 244, 255, 0.82);
}

.footer-v04-brand small {
    color: rgba(220, 232, 245, 0.70);
}

.footer-v04-column a,
.footer-v04-column span {
    color: rgba(225, 235, 247, 0.76);
}

.footer-v04-bottom {
    color: rgba(220, 232, 245, 0.68);
}