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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    color: #163038;
    background: #ffffff;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

img,
video {
    display: block;
    max-width: 100%;
}

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

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --white: #ffffff;

    --background-soft: #f5f8f8;

    --text: #17323a;

    --text-soft: #63777c;

    --petrol: #075c6e;

    --cyan: #168c91;

    --green: #238367;

    --border: #dce5e5;

    --dark: #10272d;

    --container: 1380px;

    --radius: 26px;

    --transition: 220ms ease;
}


/* =========================================================
   GLOBAL
========================================================= */

.site-wrapper {
    min-height: 100vh;
}

.site-main {
    min-height: 70vh;
}

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

    margin-inline: auto;
}

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--petrol);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.eyebrow::before {

    content: "";

    width: 30px;

    height: 1px;

    background: var(--petrol);
}

.section-number {

    display: block;

    margin-bottom: 25px;

    color: var(--cyan);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.15em;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-height: 52px;

    padding: 0 26px;

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

    background: var(--petrol);

    color: var(--white);

    font-size: 0.82rem;

    font-weight: 600;

    transition:
        transform var(--transition),
        background var(--transition),
        border var(--transition);
}

.button:hover {

    background: var(--dark);

    border-color: var(--dark);

    transform: translateY(-2px);
}

.button-small {

    min-height: 40px;

    padding: 0 18px;

    font-size: 0.75rem;
}

.text-link {

    display: inline-flex;

    align-items: center;

    min-height: 50px;

    font-size: 0.85rem;

    font-weight: 600;

    border-bottom: 1px solid var(--text);
}


/* =========================================================
   CODELAB HEADER — PREMIUM
========================================================= */

.site-header {
    position: relative;

    z-index: 1000;

    width: 100%;

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

    color:
        var(--text);

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


/* =========================================================
   TOPBAR
========================================================= */

.header-topbar {
    border-bottom:
        1px solid var(--border);

    background:
        var(--white);
}


.header-topbar-inner {
    min-height: 34px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;
}


.header-topbar span {
    color:
        #829498;

    font-size:
        0.56rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing:
        0.16em;
}


/* =========================================================
   MAIN
========================================================= */

.header-main {
    background:
        rgba(
            255,
            255,
            255,
            0.97
        );
}


.header-main-inner {
    min-height: 94px;

    display: grid;

    grid-template-columns:
        minmax(210px, auto)
        1fr
        auto;

    align-items: center;

    gap:
        clamp(
            30px,
            4vw,
            70px
        );
}


/* =========================================================
   BRAND
========================================================= */

.header-brand {
    display: inline-flex;

    flex-direction: column;

    align-items:
        flex-start;

    justify-content:
        center;

    width: max-content;
}


.header-brand-logo {
    display: inline-flex;

    align-items: center;

    color:
        var(--text);

    font-size:
        1.55rem;

    font-weight: 700;

    line-height: 0.92;

    letter-spacing:
        -0.06em;
}


.header-brand-code {
    color:
        var(--text);
}


.header-brand-lab {
    color:
        var(--cyan);
}


.header-brand-signature {
    margin-top: 6px;

    color:
        var(--text-soft);

    font-size:
        0.55rem;

    font-weight: 600;

    letter-spacing:
        0.04em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.header-navigation {
    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(
            22px,
            2.6vw,
            42px
        );
}


.header-navigation a {
    position: relative;

    padding:
        10px 0;

    color:
        var(--text-soft);

    font-size:
        0.73rem;

    font-weight: 600;

    transition:
        color var(--transition);
}


.header-navigation a::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 3px;

    width: 0;

    height: 1px;

    background:
        var(--cyan);

    transition:
        width var(--transition);
}


.header-navigation a:hover {
    color:
        var(--text);
}


.header-navigation a:hover::after {
    width: 100%;
}


/* =========================================================
   ACTIONS
========================================================= */

.header-actions {
    display: flex;

    align-items: center;

    gap: 22px;
}


.header-login,
.header-admin-link {
    color:
        var(--text-soft);

    font-size:
        0.7rem;

    font-weight: 600;
}


.header-login:hover,
.header-admin-link:hover {
    color:
        var(--petrol);
}


/* =========================================================
   ACCOUNT
========================================================= */

.header-account {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    max-width: 150px;

    color:
        var(--text);

    font-size:
        0.68rem;

    font-weight: 600;
}


.header-account > span:last-child {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.header-account-dot {
    flex:
        0 0 auto;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--green);
}


/* =========================================================
   CONTACT CTA
========================================================= */

.header-contact-link {
    min-height: 46px;

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding:
        0 18px;

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

    color:
        var(--petrol);

    font-size:
        0.7rem;

    font-weight: 700;

    transition:
        background var(--transition),
        color var(--transition);
}


.header-contact-link strong {
    font-size: 1rem;

    font-weight: 400;
}


.header-contact-link:hover {
    background:
        var(--petrol);

    color:
        var(--white);
}


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

.mobile-menu-button {
    display: none;

    width: 46px;
    height: 46px;

    padding:
        11px;

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

    background:
        transparent;
}


.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 1px;

    margin:
        5px 0;

    background:
        var(--text);

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


.mobile-menu-button.is-active
span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}


.mobile-menu-button.is-active
span:nth-child(2) {
    opacity: 0;
}


.mobile-menu-button.is-active
span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}


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

.mobile-navigation {
    display: none;

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

    background:
        var(--white);
}


.mobile-navigation-inner {
    padding:
        25px 0 35px;
}


.mobile-navigation nav {
    display: grid;
}


.mobile-navigation nav a {
    min-height: 64px;

    display: grid;

    grid-template-columns:
        55px 1fr;

    align-items: center;

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

    color:
        var(--text);

    font-size:
        1rem;

    font-weight: 500;
}


.mobile-navigation nav a span {
    color:
        var(--cyan);

    font-size:
        0.6rem;

    font-weight: 700;
}


.mobile-navigation-footer {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    padding-top: 30px;
}


.mobile-navigation-footer > span {
    color:
        var(--cyan);

    font-size:
        0.58rem;

    font-weight: 700;

    letter-spacing:
        0.14em;
}


.mobile-navigation-footer a {
    color:
        var(--petrol);

    font-size:
        0.72rem;

    font-weight: 700;
}


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

@media (max-width: 1050px) {

    .header-main-inner {
        grid-template-columns:
            auto 1fr auto;
    }


    .header-navigation {
        gap: 20px;
    }


    .header-contact-link span {
        display: none;
    }


    .header-contact-link {
        width: 46px;

        padding: 0;

        justify-content:
            center;
    }

}


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

@media (max-width: 820px) {

    .header-topbar {
        display: none;
    }


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

        grid-template-columns:
            1fr auto;
    }


    .header-navigation,
    .header-actions {
        display: none;
    }


    .mobile-menu-button {
        display: block;
    }


    .mobile-navigation.is-open {
        display: block;
    }


    .header-brand-logo {
        font-size: 1.4rem;
    }


    .header-brand-signature {
        font-size: 0.52rem;
    }

}


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

@media (max-width: 480px) {

    .mobile-navigation nav a {
        min-height: 60px;

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


    .mobile-navigation-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}

/* =========================================================
   HEADER INTERACTION
========================================================= */

.site-header {
    transition:
        box-shadow var(--transition),
        background var(--transition);
}


.site-header.is-scrolled {
    box-shadow:
        0 10px 35px
        rgba(
            18,
            52,
            59,
            0.06
        );
}


body.mobile-menu-open {
    overflow: hidden;
}


@media (min-width: 821px) {

    body.mobile-menu-open {
        overflow: auto;
    }

}




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

.hero {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 72%,
            #f4fafa 100%
        );
}

.hero-grid {

    min-height: calc(100vh - 88px);

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(300px, 0.75fr)
        minmax(330px, 0.9fr);

    align-items: stretch;
}

.hero-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        80px 55px
        80px 0;
}

.hero-content h1 {

    max-width: 600px;

    margin-bottom: 28px;

    color: var(--text);

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

    line-height: 0.88;

    font-weight: 500;

    letter-spacing: -0.065em;
}

.hero-content h1 span {

    color: var(--petrol);
}

.hero-description {

    max-width: 510px;

    margin-bottom: 36px;

    color: var(--text-soft);

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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 28px;
}


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

.hero-profile {

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;
}

.hero-profile::before {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22, 140, 145, 0.13),
            rgba(35, 131, 103, 0)
        );

    top: 18%;

    left: 50%;

    transform:
        translateX(-50%);
}

.profile-frame {

    position: relative;

    width: 100%;

    height: 92%;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;
}

.profile-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;

    filter:
        saturate(0.9)
        contrast(1.02);
}


/* =========================================================
   VIDEO
========================================================= */

.hero-media {

    display: flex;

    padding:
        28px 0
        28px 28px;
}

.video-card {

    position: relative;

    width: 100%;

    min-height: 100%;

    overflow: hidden;

    background: var(--dark);
}

.video-card video {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.video-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 35, 42, 0.05),
            rgba(8, 35, 42, 0.75)
        );
}

.video-overlay {

    position: absolute;

    z-index: 2;

    left: 32px;

    right: 32px;

    bottom: 32px;

    color: white;
}

.video-overlay span {

    display: block;

    margin-bottom: 12px;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.video-overlay strong {

    display: block;

    max-width: 310px;

    margin-bottom: 22px;

    font-size:
        clamp(
            1.5rem,
            2.3vw,
            2.7rem
        );

    line-height: 1;

    font-weight: 500;
}

.video-overlay a {

    display: inline-flex;

    gap: 12px;

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

    font-size: 0.78rem;

    font-weight: 600;
}


/* =========================================================
   INTRO
========================================================= */

.intro-section {

    padding:
        clamp(85px, 11vw, 160px)
        0;

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

.intro-grid {

    display: grid;

    grid-template-columns:
        0.35fr
        1fr
        0.8fr;

    gap: clamp(
        35px,
        6vw,
        100px
    );
}

.intro-grid h2 {

    margin: 0;

    font-size:
        clamp(
            2.4rem,
            4vw,
            5.2rem
        );

    line-height: 1;

    font-weight: 500;

    letter-spacing: -0.05em;
}

.intro-grid p {

    color: var(--text-soft);
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.ecosystem-section {

    padding:
        clamp(80px, 10vw, 140px)
        0;

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

.section-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 60px;
}

.section-header h2 {

    margin: 0;

    font-size:
        clamp(
            2.5rem,
            4vw,
            4.8rem
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.05em;
}

.ecosystem-grid {

    display: grid;

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

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

.ecosystem-card {

    min-height: 350px;

    padding: 36px;

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

.ecosystem-card:first-child {

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

.card-number {

    display: block;

    margin-bottom: 100px;

    color: var(--cyan);

    font-size: 0.72rem;
}

.ecosystem-card h3 {

    margin-bottom: 18px;

    font-size: 1.55rem;

    font-weight: 500;
}

.ecosystem-card p {

    max-width: 290px;

    margin: 0;

    color: var(--text-soft);
}


/* =========================================================
   CTA
========================================================= */

.home-cta {

    padding:
        clamp(
            80px,
            11vw,
            160px
        )
        0;
}

.home-cta-inner {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;
}

.home-cta h2 {

    max-width: 800px;

    margin: 0;

    font-size:
        clamp(
            2.7rem,
            5vw,
            6rem
        );

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.055em;
}

.circle-arrow {

    flex: 0 0 auto;

    width: 96px;

    height: 96px;

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: var(--petrol);

    font-size: 2rem;

    transition:
        background var(--transition),
        color var(--transition);
}

.circle-arrow:hover {

    background:
        var(--petrol);

    color: white;
}


/* =========================================================
   INNER PAGE HERO
========================================================= */

.page-hero {

    padding:
        clamp(
            100px,
            12vw,
            170px
        )
        0;

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

.page-hero h1 {

    max-width: 950px;

    margin-bottom: 30px;

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

    line-height: 0.9;

    font-weight: 500;

    letter-spacing: -0.06em;
}

.page-hero p {

    max-width: 650px;

    margin: 0;

    color: var(--text-soft);

    font-size: 1.1rem;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.placeholder-section {

    padding:
        clamp(
            70px,
            10vw,
            140px
        )
        0;
}

.placeholder-card {

    padding:
        clamp(
            40px,
            6vw,
            85px
        );

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

.placeholder-card span {

    color: var(--cyan);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.placeholder-card h2 {

    margin:
        25px 0 18px;

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

    font-weight: 500;

    letter-spacing: -0.04em;
}

.placeholder-card p {

    max-width: 550px;

    margin: 0;

    color: var(--text-soft);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

    padding:
        clamp(
            70px,
            10vw,
            140px
        )
        0;
}

.contact-layout {

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap:
        clamp(
            50px,
            9vw,
            150px
        );
}

.contact-copy h2 {

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

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.05em;
}

.contact-copy p {

    max-width: 430px;

    color: var(--text-soft);
}

.contact-form {

    display: grid;

    gap: 30px;
}

.form-field {

    display: grid;

    gap: 10px;
}

.form-field label {

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.form-field input,
.form-field textarea {

    width: 100%;

    padding: 17px 0;

    border: 0;

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

    outline: none;

    background:
        transparent;

    color: var(--text);

    transition:
        border var(--transition);
}

.form-field textarea {

    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {

    border-bottom-color:
        var(--petrol);
}


/* =========================================================
   FLASH
========================================================= */

.flash-container {

    padding-top: 20px;
}

.flash {

    padding: 15px 20px;

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

    font-size: 0.85rem;
}

.flash-success {

    border-color:
        #91c8ad;

    background:
        #eef8f1;
}

.flash-error {

    border-color:
        #e0aaaa;

    background:
        #fff3f3;
}

.flash-warning {

    border-color:
        #dec68e;

    background:
        #fffaf0;
}


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

@media (
    max-width: 1100px
) {

    .navbar {

        gap: 20px;
    }

    .main-navigation {

        gap: 22px;
    }

    .hero-grid {

        grid-template-columns:
            1fr 0.75fr;
    }

    .hero-media {

        grid-column:
            1 / -1;

        min-height: 480px;

        padding:
            0 0 30px;
    }

    .intro-grid {

        grid-template-columns:
            0.25fr
            1fr;
    }

    .intro-grid > :last-child {

        grid-column: 2;
    }

}


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

@media (
    max-width: 820px
) {

    .container {

        width:
            min(
                calc(
                    100% - 30px
                ),
                var(--container)
            );
    }

    .navbar {

        min-height: 74px;

        grid-template-columns:
            1fr auto;
    }

    .brand-logo {

        width: 125px;

        height: 48px;
    }

    .mobile-menu-button {

        display: block;
    }

    .navbar-actions {

        display: none;
    }

    .main-navigation {

        position: absolute;

        top: 74px;

        left: 0;

        width: 100%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 12px 20px 25px;

        background:
            var(--white);

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

    .main-navigation.is-open {

        display: flex;
    }

    .main-navigation a {

        padding: 15px 5px;

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

        font-size: 0.82rem;
    }

    .hero-grid {

        min-height: auto;

        display: block;
    }

    .hero-content {

        min-height: 650px;

        padding:
            85px 5px
            60px;
    }

    .hero-content h1 {

        font-size:
            clamp(
                3.7rem,
                18vw,
                6rem
            );
    }

    .hero-profile {

        height: 620px;

        margin-inline:
            -15px;
    }

    .profile-frame {

        height: 100%;
    }

    .hero-media {

        min-height: 520px;

        margin-inline:
            -15px;

        padding: 0;
    }

    .intro-grid {

        display: block;
    }

    .intro-grid > div {

        margin-bottom: 40px;
    }

    .ecosystem-grid {

        display: block;
    }

    .ecosystem-card {

        min-height: auto;

        padding:
            35px 20px;

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

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

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

    .card-number {

        margin-bottom: 55px;
    }

    .home-cta-inner {

        display: block;
    }

    .circle-arrow {

        margin-top: 45px;

        width: 80px;

        height: 80px;
    }

    .contact-layout {

        display: block;
    }

    .contact-copy {

        margin-bottom: 60px;
    }
}


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

@media (
    max-width: 480px
) {

    .hero-content {

        min-height: 570px;

        padding-top: 65px;
    }

    .hero-description {

        font-size: 0.95rem;
    }

    .hero-actions {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .hero-profile {

        height: 520px;
    }

    .hero-media {

        min-height: 460px;
    }

    .video-overlay {

        left: 22px;

        right: 22px;

        bottom: 25px;
    }

    .page-hero {

        padding:
            80px 0;
    }

}

.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 1px;

    margin: 5px 0;

    background: var(--text);

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


.mobile-menu-button.is-active span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}


.mobile-menu-button.is-active span:nth-child(2) {
    opacity: 0;
}


.mobile-menu-button.is-active span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}

/* =========================================================
   FASE 2 — PROJECTS
========================================================= */

.featured-projects,
.projects-page {

    padding:
        clamp(80px, 10vw, 150px)
        0;
}


.projects-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

    margin-bottom: 60px;
}


.projects-heading h2 {

    margin: 0;

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

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.055em;
}


.projects-grid {

    display: grid;

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

    gap: 24px;
}


.projects-grid-page {

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

    gap:
        clamp(30px, 5vw, 70px);
}


.project-card {

    position: relative;

    overflow: hidden;
}


.project-image {

    aspect-ratio: 4 / 3;

    overflow: hidden;

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


.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 500ms ease;
}


.project-card:hover
.project-image img {

    transform: scale(1.035);
}


.project-image-placeholder {

    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #eef6f5,
            #dfeeed
        );

    color: var(--petrol);

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

    font-weight: 500;
}


.project-info {

    padding:
        24px 0 15px;
}


.project-info span {

    display: block;

    margin-bottom: 14px;

    color: var(--cyan);

    font-size: 0.66rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.project-info h2,
.project-info h3 {

    margin-bottom: 15px;

    color: var(--text);

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

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -0.035em;
}


.project-info p {

    margin-bottom: 22px;

    color: var(--text-soft);
}


.project-info strong {

    color: var(--petrol);

    font-size: 0.76rem;

    font-weight: 700;
}


.empty-projects {

    padding:
        clamp(50px, 8vw, 100px);

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


.empty-projects span {

    color: var(--cyan);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.16em;
}


.empty-projects h2,
.empty-projects h3 {

    max-width: 700px;

    margin:
        25px 0 15px;

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

    line-height: 1;

    font-weight: 500;

    letter-spacing: -0.05em;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy-section {

    padding:
        clamp(90px, 12vw, 180px)
        0;

    background:
        var(--dark);

    color: white;
}


.philosophy-grid {

    display: grid;

    grid-template-columns:
        0.3fr 1fr;

    gap: 50px;
}


.philosophy-section
.eyebrow {

    color: #8fd8d2;
}


.philosophy-section
.eyebrow::before {

    background: #8fd8d2;
}


.philosophy-section
blockquote {

    max-width: 950px;

    margin: 0;

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

    line-height: 0.9;

    font-weight: 400;

    letter-spacing: -0.06em;
}


/* =========================================================
   PROJECT DETAIL
========================================================= */

.project-detail-hero {

    padding:
        clamp(100px, 12vw, 180px)
        0 80px;
}


.project-detail-hero h1 {

    max-width: 1050px;

    margin-bottom: 30px;

    font-size:
        clamp(3.5rem, 8vw, 9rem);

    line-height: 0.85;

    font-weight: 500;

    letter-spacing: -0.065em;
}


.project-detail-hero p {

    max-width: 700px;

    margin: 0;

    color: var(--text-soft);

    font-size: 1.1rem;
}


.project-detail-image {

    padding-bottom:
        clamp(70px, 10vw, 140px);
}


.project-detail-image img {

    width: 100%;

    max-height: 780px;

    object-fit: cover;
}


.project-detail-content {

    padding:
        clamp(80px, 10vw, 150px)
        0;

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


.project-detail-grid {

    display: grid;

    grid-template-columns:
        0.35fr 1fr;

    gap:
        clamp(50px, 8vw, 130px);
}


.project-detail-grid h2 {

    margin-bottom: 30px;

    font-size:
        clamp(2.7rem, 5vw, 5.5rem);

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -0.055em;
}


.project-detail-grid p {

    max-width: 760px;

    margin-bottom: 40px;

    color: var(--text-soft);

    font-size: 1.05rem;
}


/* =========================================================
   CONTACT ERRORS
========================================================= */

.form-errors {

    margin-bottom: 35px;

    padding: 18px 22px;

    border:
        1px solid #deb5b5;

    background:
        #fff7f7;
}


.form-errors p {

    margin:
        4px 0;

    color:
        #8d3939;

    font-size: 0.84rem;
}


/* =========================================================
   FASE 2 MOBILE
========================================================= */

@media (max-width: 820px) {

    .projects-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .projects-grid,
    .projects-grid-page {

        grid-template-columns: 1fr;
    }


    .philosophy-grid {

        display: block;
    }


    .philosophy-grid
    .section-number {

        margin-bottom: 50px;
    }


    .project-detail-grid {

        display: block;
    }


    .project-detail-grid
    > div:first-child {

        margin-bottom: 45px;
    }

}

/* =========================================================
   CODELAB FOOTER — PREMIUM CLEAN
========================================================= */

.site-footer {
    width: 100%;
    margin-top: clamp(80px, 10vw, 140px);
    padding: 0;
    overflow: hidden;

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

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


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

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

    margin-inline: auto;
}


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

.footer-main {
    display: grid;

    grid-template-columns:
        minmax(320px, 1.8fr)
        repeat(3, minmax(140px, 0.7fr));

    gap:
        clamp(38px, 5vw, 80px);

    padding:
        clamp(70px, 8vw, 110px)
        0;
}


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

.footer-brand {
    max-width: 470px;
}


.footer-logo {
    display: inline-flex;
    align-items: center;

    margin-bottom: 22px;

    color: var(--text);

    font-size:
        clamp(1.65rem, 2.4vw, 2.2rem);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.055em;
}


.footer-logo-code {
    color: var(--text);
}


.footer-logo-lab {
    color: var(--cyan);
}


.footer-brand .footer-brand-name {
    margin:
        0 0 18px;

    color: var(--cyan);

    font-size: 0.68rem;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.footer-brand .footer-description {
    max-width: 420px;

    margin: 0;

    color: var(--text-soft);

    font-size: 0.86rem;

    line-height: 1.8;
}


.footer-primary-link {
    display: inline-flex;
    align-items: center;

    margin-top: 30px;
    padding-bottom: 5px;

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

    color: var(--petrol);

    font-size: 0.76rem;

    font-weight: 700;

    transition:
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


.footer-primary-link:hover {
    color: var(--cyan);

    border-color: var(--cyan);

    transform: translateX(3px);
}


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

.footer-column {
    min-width: 0;
}


.footer-column-title {
    display: block;

    margin-bottom: 26px;

    color: var(--cyan);

    font-size: 0.62rem;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


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

.site-footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;

    gap: 14px;

    margin: 0;

    font-size: inherit;
}


.site-footer .footer-links a {
    position: relative;

    display: inline-flex;

    padding: 0;

    color: var(--text-soft);

    font-size: 0.78rem;

    font-weight: 500;

    line-height: 1.45;

    transition:
        color var(--transition),
        transform var(--transition);
}


.site-footer .footer-links a:hover {
    color: var(--petrol);

    transform: translateX(4px);
}


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

.footer-contact {
    display: block;
}


.footer-contact-item {
    padding:
        16px 0;

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


.footer-contact-item:first-of-type {
    padding-top: 0;
}


.footer-contact-item small {
    display: block;

    margin-bottom: 6px;

    color: #8da0a4;

    font-size: 0.58rem;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.11em;
}


.footer-contact-item strong,
.footer-contact-item a {
    color: var(--text);

    font-size: 0.77rem;

    font-weight: 600;

    line-height: 1.5;
}


.footer-contact-item a {
    transition:
        color var(--transition);
}


.footer-contact-item a:hover {
    color: var(--cyan);
}


/* =========================================================
   FOOTER CHATBOT BUTTON
========================================================= */

.footer-chat-button {
    display: inline-flex;
    align-items: center;

    min-height: 0;

    padding: 0;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--text);

    font: inherit;

    font-size: 0.77rem;

    font-weight: 600;

    line-height: 1.5;

    cursor: pointer;

    transition:
        color var(--transition),
        transform var(--transition);
}


.footer-chat-button:hover {
    color: var(--cyan);

    transform: translateX(4px);
}


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

.footer-socials {
    display: flex;
    flex-wrap: wrap;

    gap: 16px;

    margin-top: 24px;
}


.footer-socials a {
    color: var(--text-soft);

    font-size: 0.72rem;

    font-weight: 600;

    transition:
        color var(--transition);
}


.footer-socials a:hover {
    color: var(--petrol);
}


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

.footer-statement {
    position: relative;

    min-height: 520px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(75px, 9vw, 130px)
        0;

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


.footer-statement > span {
    display: block;

    margin-bottom: 32px;

    color: var(--cyan);

    font-size: 0.64rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.footer-statement h2 {
    max-width: 1050px;

    margin: 0;

    color: var(--text);

    font-size:
        clamp(4.4rem, 8.4vw, 8.8rem);

    font-weight: 500;

    line-height: 0.82;

    letter-spacing: -0.075em;
}


.footer-back-top {
    position: absolute;

    right: 0;
    bottom:
        clamp(75px, 9vw, 130px);

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

    color: var(--text-soft);

    font-size: 0.7rem;

    font-weight: 600;

    transition:
        color var(--transition),
        transform var(--transition);
}


.footer-back-top:hover {
    color: var(--petrol);

    transform: translateY(-3px);
}


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

.footer-bottom {
    width: 100%;

    background: var(--background-soft);

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


.footer-bottom-inner {
    min-height: 84px;

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

    gap: 30px;
}


.footer-copyright {
    color: var(--text-soft);

    font-size: 0.68rem;

    line-height: 1.6;
}


.footer-copyright span {
    margin-left: 4px;
}


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

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 24px;
}


.footer-legal a {
    color: var(--text-soft);

    font-size: 0.67rem;

    font-weight: 600;

    transition:
        color var(--transition);
}


.footer-legal a:hover {
    color: var(--petrol);
}


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

@media (max-width: 1050px) {

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

        gap:
            50px 36px;
    }


    .footer-brand {
        grid-column:
            1 / -1;

        max-width: 620px;
    }


    .footer-statement {
        min-height: 450px;
    }


    .footer-statement h2 {
        max-width: 850px;
    }

}


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

@media (max-width: 700px) {

    .site-footer {
        margin-top: 80px;
    }


    .site-footer .container {
        width:
            min(
                calc(100% - 30px),
                var(--container)
            );
    }


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

        gap:
            48px 28px;

        padding:
            65px 0;
    }


    .footer-brand {
        grid-column:
            1 / -1;

        max-width: 100%;
    }


    .footer-description {
        max-width: 100%;
    }


    .footer-statement {
        min-height: 0;

        padding:
            70px 0;
    }


    .footer-statement > span {
        margin-bottom: 26px;
    }


    .footer-statement h2 {
        max-width: 100%;

        font-size:
            clamp(3.5rem, 15vw, 6rem);

        line-height: 0.87;

        letter-spacing: -0.065em;
    }


    .footer-back-top {
        position: static;

        margin-top: 42px;
    }


    .footer-bottom-inner {
        min-height: 0;

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

        gap: 18px;

        padding:
            24px 0;
    }


    .footer-legal {
        justify-content: flex-start;

        gap:
            14px 22px;
    }

}


/* =========================================================
   FOOTER SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .footer-main {
        grid-template-columns: 1fr;

        gap: 40px;

        padding:
            55px 0;
    }


    .footer-brand {
        grid-column: auto;
    }


    .footer-column {
        padding-top: 2px;
    }


    .footer-column-title {
        margin-bottom: 18px;
    }


    .site-footer .footer-links {
        gap: 12px;
    }


    .footer-statement {
        padding:
            55px 0;
    }


    .footer-statement h2 {
        font-size:
            clamp(3.15rem, 16vw, 4.8rem);
    }


    .footer-copyright span {
        display: block;

        margin:
            3px 0 0;
    }

}

/* =========================================================
   FOOTER — FINAL OVERRIDE
   Deve permanecer no fim absoluto de style.css
========================================================= */

body .site-footer {
    width: 100%;
    margin-top: 120px;
    padding: 0;

    background: #ffffff !important;
    color: #17323a !important;

    border-top: 1px solid #dce5e5;
}


body .site-footer,
body .site-footer * {
    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}


body .site-footer .footer-main {
    width: min(
        calc(100% - 40px),
        1380px
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 1.8fr)
        repeat(3, minmax(150px, 0.7fr));

    gap: 65px;

    padding: 90px 0;
}


body .site-footer .footer-brand {
    max-width: 460px;
}


body .site-footer .footer-logo {
    display: inline-flex;

    margin-bottom: 22px;

    color: #17323a;

    font-size: 34px;
    font-weight: 700;

    letter-spacing: -2px;
}


body .site-footer .footer-logo-code {
    color: #17323a;
}


body .site-footer .footer-logo-lab {
    color: #168c91;
}


body .site-footer .footer-brand-name {
    margin-bottom: 18px;

    color: #168c91;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}


body .site-footer .footer-description {
    max-width: 420px;

    color: #63777c;

    font-size: 14px;

    line-height: 1.8;
}


body .site-footer .footer-primary-link {
    display: inline-flex;

    margin-top: 28px;

    padding-bottom: 5px;

    border-bottom: 1px solid #075c6e;

    color: #075c6e;

    font-size: 13px;
    font-weight: 700;
}


body .site-footer .footer-column-title {
    display: block;

    margin-bottom: 26px;

    color: #168c91;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.6px;
    text-transform: uppercase;
}


body .site-footer .footer-links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;

    margin: 0;

    padding: 0;
}


body .site-footer .footer-links a {
    color: #63777c;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.5;
}


body .site-footer .footer-links a:hover {
    color: #075c6e;
}


body .site-footer .footer-contact-item {
    padding: 16px 0;

    border-bottom: 1px solid #dce5e5;
}


body .site-footer .footer-contact-item:first-of-type {
    padding-top: 0;
}


body .site-footer .footer-contact-item small {
    display: block;

    margin-bottom: 6px;

    color: #8da0a4;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;
}


body .site-footer .footer-contact-item strong,
body .site-footer .footer-contact-item a {
    color: #17323a;

    font-size: 13px;
    font-weight: 600;
}


body .site-footer .footer-chat-button {
    padding: 0;

    border: 0;

    background: transparent !important;

    color: #17323a !important;

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   GRANDE ASSINATURA
========================================================= */

body .site-footer .footer-statement {
    width: min(
        calc(100% - 40px),
        1380px
    );

    min-height: 540px;

    margin: 0 auto;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 100px 0;

    border-top: 1px solid #dce5e5;
}


body .site-footer .footer-statement > span {
    margin-bottom: 35px;

    color: #168c91;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


body .site-footer .footer-statement h2 {
    max-width: 1050px;

    margin: 0;

    color: #17323a !important;

    font-size: clamp(
        70px,
        8.5vw,
        135px
    );

    font-weight: 500;

    line-height: 0.82;

    letter-spacing: -0.075em;
}


body .site-footer .footer-back-top {
    position: absolute;

    right: 0;
    bottom: 100px;

    color: #63777c;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

body .site-footer .footer-bottom {
    width: 100%;

    background: #f5f8f8 !important;

    border-top: 1px solid #dce5e5;
}


body .site-footer .footer-bottom-inner {
    width: min(
        calc(100% - 40px),
        1380px
    );

    min-height: 85px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


body .site-footer .footer-copyright {
    color: #63777c;

    font-size: 11px;
}


body .site-footer .footer-legal {
    display: flex;

    gap: 25px;
}


body .site-footer .footer-legal a {
    color: #63777c;

    font-size: 11px;
    font-weight: 600;
}


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

@media (max-width: 1000px) {

    body .site-footer .footer-main {
        grid-template-columns:
            repeat(3, 1fr);
    }


    body .site-footer .footer-brand {
        grid-column:
            1 / -1;
    }

}


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

@media (max-width: 700px) {

    body .site-footer {
        margin-top: 80px;
    }


    body .site-footer .footer-main {
        width:
            calc(100% - 30px);

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

        gap:
            45px 25px;

        padding:
            65px 0;
    }


    body .site-footer .footer-brand {
        grid-column:
            1 / -1;
    }


    body .site-footer .footer-statement {
        width:
            calc(100% - 30px);

        min-height: 0;

        padding:
            70px 0;
    }


    body .site-footer .footer-statement h2 {
        font-size:
            clamp(
                55px,
                15vw,
                90px
            );
    }


    body .site-footer .footer-back-top {
        position: static;

        margin-top: 45px;
    }


    body .site-footer .footer-bottom-inner {
        width:
            calc(100% - 30px);

        min-height: 0;

        padding:
            25px 0;

        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 480px) {

    body .site-footer .footer-main {
        grid-template-columns: 1fr;
    }


    body .site-footer .footer-brand {
        grid-column: auto;
    }


    body .site-footer .footer-statement h2 {
        font-size:
            clamp(
                50px,
                16vw,
                72px
            );
    }


    body .site-footer .footer-legal {
        flex-wrap: wrap;

        gap:
            15px 22px;
    }

}

/* =========================================================
   LEGAL PAGES
   PRIVACIDADE / TERMOS / COOKIES
========================================================= */


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

.legal-hero {
    padding:
        clamp(100px, 12vw, 175px)
        0
        clamp(70px, 8vw, 110px);

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

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


.legal-hero h1 {
    max-width: 1050px;

    margin:
        0 0 32px;

    color:
        var(--text);

    font-size:
        clamp(
            4rem,
            8vw,
            9rem
        );

    font-weight: 500;

    line-height: 0.84;

    letter-spacing:
        -0.07em;
}


.legal-hero p {
    max-width: 680px;

    margin:
        0 0 35px;

    color:
        var(--text-soft);

    font-size:
        clamp(
            1rem,
            1.6vw,
            1.15rem
        );

    line-height: 1.7;
}


.legal-updated {
    display: inline-flex;

    padding-top: 15px;

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

    color:
        var(--text-soft);

    font-size: 0.65rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


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

.legal-section {
    padding:
        clamp(
            80px,
            10vw,
            150px
        )
        0;
}


.legal-layout {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.3fr)
        minmax(0, 1fr);

    gap:
        clamp(
            60px,
            9vw,
            150px
        );

    align-items: start;
}


/* =========================================================
   INDEX
========================================================= */

.legal-index {
    position: sticky;

    top: 40px;
}


.legal-index > span {
    display: block;

    margin-bottom: 30px;

    color:
        var(--cyan);

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing:
        0.14em;
}


.legal-index nav {
    display: grid;
}


.legal-index nav a {
    padding:
        13px 0;

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

    color:
        var(--text-soft);

    font-size: 0.7rem;

    transition:
        color var(--transition),
        transform var(--transition);
}


.legal-index nav a:hover {
    color:
        var(--petrol);

    transform:
        translateX(4px);
}


/* =========================================================
   CONTENT
========================================================= */

.legal-content {
    max-width: 900px;
}


.legal-block {
    scroll-margin-top: 40px;

    padding:
        0 0
        clamp(
            65px,
            8vw,
            105px
        );

    margin-bottom:
        clamp(
            65px,
            8vw,
            105px
        );

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


.legal-block:last-child {
    margin-bottom: 0;

    border-bottom: 0;
}


.legal-number {
    display: block;

    margin-bottom: 25px;

    color:
        var(--cyan);

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing:
        0.12em;
}


.legal-block h2 {
    max-width: 800px;

    margin:
        0 0 35px;

    color:
        var(--text);

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

    font-weight: 500;

    line-height: 1;

    letter-spacing:
        -0.045em;
}


.legal-block h3 {
    margin:
        40px 0 15px;

    color:
        var(--text);

    font-size: 1.15rem;

    font-weight: 600;
}


.legal-block p {
    max-width: 790px;

    margin:
        0 0 22px;

    color:
        var(--text-soft);

    font-size:
        0.93rem;

    line-height: 1.85;
}


.legal-block p strong {
    color:
        var(--text);

    font-weight: 600;
}


.legal-block p a {
    color:
        var(--petrol);

    font-weight: 600;

    border-bottom:
        1px solid
        rgba(
            7,
            92,
            110,
            0.3
        );
}


.legal-block .button {
    margin-top: 25px;
}


/* =========================================================
   LEGAL TABLE
========================================================= */

.legal-table-wrap {
    margin-top: 35px;

    overflow-x: auto;

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


.legal-table {
    width: 100%;

    min-width: 650px;

    border-collapse:
        collapse;
}


.legal-table th,
.legal-table td {
    padding:
        20px 18px;

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

    text-align: left;

    vertical-align: top;
}


.legal-table th {
    color:
        var(--text-soft);

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.legal-table td {
    color:
        var(--text-soft);

    font-size: 0.78rem;

    line-height: 1.65;
}


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

@media (max-width: 900px) {

    .legal-layout {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    .legal-index {
        position: static;
    }


    .legal-index nav {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            0 25px;
    }

}


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

@media (max-width: 600px) {

    .legal-hero {
        padding:
            80px 0 65px;
    }


    .legal-hero h1 {
        font-size:
            clamp(
                3.6rem,
                17vw,
                5.4rem
            );
    }


    .legal-section {
        padding:
            65px 0;
    }


    .legal-index nav {
        grid-template-columns: 1fr;
    }


    .legal-block {
        padding-bottom: 55px;

        margin-bottom: 55px;
    }


    .legal-block h2 {
        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );
    }

}

/* =========================================================
   PORTFOLIO / PROJECTS — PREMIUM PUBLIC AREA
========================================================= */


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

.portfolio-hero {
    padding:
        clamp(110px, 12vw, 180px)
        0
        clamp(80px, 9vw, 130px);

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

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


.portfolio-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(280px, 0.65fr);

    align-items: end;

    gap:
        clamp(50px, 8vw, 120px);
}


.portfolio-hero h1 {
    max-width: 1050px;

    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(
            4.3rem,
            8.3vw,
            8.8rem
        );

    font-weight:
        500;

    line-height:
        0.84;

    letter-spacing:
        -0.075em;
}


.portfolio-hero-copy {
    padding-bottom:
        12px;
}


.portfolio-hero-copy p {
    max-width:
        430px;

    margin:
        0 0 28px;

    color:
        var(--text-soft);

    font-size:
        0.95rem;

    line-height:
        1.8;
}


.portfolio-hero-copy > span {
    display:
        inline-block;

    padding-top:
        14px;

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

    color:
        var(--cyan);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.portfolio-section-heading {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        clamp(
            55px,
            7vw,
            95px
        );
}


.portfolio-section-heading > div {
    max-width:
        800px;
}


.portfolio-section-heading h2 {
    margin:
        12px 0 0;

    color:
        var(--text);

    font-size:
        clamp(
            2.8rem,
            5.5vw,
            5.8rem
        );

    font-weight:
        500;

    line-height:
        0.95;

    letter-spacing:
        -0.06em;
}


.portfolio-project-count {
    padding-bottom:
        8px;

    color:
        var(--text-soft);

    font-size:
        0.68rem;

    font-weight:
        600;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* =========================================================
   FEATURED PROJECTS
========================================================= */

.portfolio-featured {
    padding:
        clamp(
            90px,
            11vw,
            160px
        )
        0;

    background:
        var(--white);
}


.portfolio-featured-grid {
    display: grid;

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

    gap:
        clamp(
            35px,
            5vw,
            70px
        );
}


.portfolio-featured-card {
    border-top:
        1px solid var(--border);
}


.portfolio-featured-link {
    display: block;

    color:
        inherit;
}


.portfolio-card-meta {
    min-height:
        60px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap:
        20px;
}


.portfolio-card-meta span {
    color:
        var(--text-soft);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.portfolio-card-meta span:first-child {
    color:
        var(--cyan);
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.portfolio-featured-image {
    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        16 / 10;

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


.portfolio-featured-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 700ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


.portfolio-featured-card:hover
.portfolio-featured-image img {
    transform:
        scale(1.035);
}


.portfolio-image-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #f2f6f6,
            #e8eeee
        );
}


.portfolio-image-placeholder span {
    color:
        var(--cyan);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.18em;
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.portfolio-featured-content {
    display: flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    gap:
        35px;

    padding:
        32px 0 0;
}


.portfolio-featured-content h3 {
    margin:
        0 0 18px;

    color:
        var(--text);

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

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.portfolio-featured-content p {
    max-width:
        560px;

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.84rem;

    line-height:
        1.75;
}


.portfolio-card-bottom {
    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;
}


.portfolio-card-bottom strong {
    flex:
        0 0 auto;

    color:
        var(--petrol);

    font-size:
        0.7rem;

    font-weight:
        700;

    transition:
        color var(--transition),
        transform var(--transition);
}


.portfolio-featured-card:hover
.portfolio-card-bottom strong {
    color:
        var(--cyan);

    transform:
        translateX(4px);
}


/* =========================================================
   TECHNOLOGY PILLS
========================================================= */

.portfolio-tech-list {
    display: flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.portfolio-tech-list span {
    padding:
        7px 10px;

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

    background:
        var(--background-soft);

    color:
        var(--text-soft);

    font-size:
        0.58rem;

    font-weight:
        600;

    line-height:
        1;
}


/* =========================================================
   ALL PROJECTS
========================================================= */

.portfolio-all {
    padding:
        clamp(
            90px,
            11vw,
            160px
        )
        0;

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

    background:
        #fbfcfc;
}


.portfolio-project-list {
    border-top:
        1px solid var(--border);
}


.portfolio-project-row {
    border-bottom:
        1px solid var(--border);
}


.portfolio-project-row > a {
    display: grid;

    grid-template-columns:
        60px
        150px
        minmax(240px, 1fr)
        minmax(180px, 0.6fr)
        50px;

    align-items:
        center;

    gap:
        28px;

    min-height:
        180px;

    padding:
        24px 0;

    color:
        inherit;

    transition:
        background var(--transition);
}


.portfolio-project-row:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.72
        );
}


/* =========================================================
   PROJECT NUMBER
========================================================= */

.portfolio-project-number {
    color:
        var(--cyan);

    font-size:
        0.65rem;

    font-weight:
        700;
}


/* =========================================================
   PROJECT THUMB
========================================================= */

.portfolio-project-thumb {
    width:
        150px;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

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


.portfolio-project-thumb img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 500ms ease;
}


.portfolio-project-row:hover
.portfolio-project-thumb img {
    transform:
        scale(1.04);
}


.portfolio-thumb-placeholder {
    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--cyan);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;
}


/* =========================================================
   PROJECT MAIN
========================================================= */

.portfolio-project-main > span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--cyan);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.portfolio-project-main h3 {
    margin:
        0 0 12px;

    color:
        var(--text);

    font-size:
        clamp(
            1.5rem,
            2.7vw,
            2.45rem
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -0.045em;
}


.portfolio-project-main p {
    max-width:
        600px;

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.77rem;

    line-height:
        1.65;
}


/* =========================================================
   PROJECT STACK
========================================================= */

.portfolio-project-stack {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px 12px;
}


.portfolio-project-stack span {
    color:
        var(--text-soft);

    font-size:
        0.61rem;

    font-weight:
        600;
}


/* =========================================================
   PROJECT ARROW
========================================================= */

.portfolio-project-arrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    color:
        var(--petrol);

    font-size:
        1.3rem;

    transition:
        color var(--transition),
        transform var(--transition);
}


.portfolio-project-row:hover
.portfolio-project-arrow {
    color:
        var(--cyan);

    transform:
        translateX(5px);
}


/* =========================================================
   PROJECT DETAIL — HERO
========================================================= */

.project-premium-hero {
    padding:
        clamp(
            90px,
            11vw,
            155px
        )
        0
        clamp(
            65px,
            8vw,
            105px
        );

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

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


.project-premium-hero
.article-back {
    display:
        inline-flex;

    margin-bottom:
        65px;
}


.project-premium-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        30px;
}


.project-premium-category {
    color:
        var(--text-soft);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.project-premium-heading {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.55fr);

    align-items:
        end;

    gap:
        clamp(
            45px,
            8vw,
            120px
        );
}


.project-premium-heading h1 {
    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(
            4.5rem,
            9vw,
            9.5rem
        );

    font-weight:
        500;

    line-height:
        0.82;

    letter-spacing:
        -0.08em;
}


.project-premium-heading p {
    max-width:
        420px;

    margin:
        0 0 12px;

    color:
        var(--text-soft);

    font-size:
        0.95rem;

    line-height:
        1.8;
}


/* =========================================================
   PROJECT DETAIL — VISUAL
========================================================= */

.project-premium-visual {
    padding:
        clamp(
            45px,
            6vw,
            85px
        )
        0
        0;
}


.project-premium-image {
    overflow:
        hidden;

    width:
        100%;

    max-height:
        820px;

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


.project-premium-image img {
    display:
        block;

    width:
        100%;

    max-height:
        820px;

    object-fit:
        cover;
}


/* =========================================================
   PROJECT DETAIL — GLOBAL GRID
========================================================= */

.project-premium-overview,
.project-premium-section {
    padding:
        clamp(
            90px,
            10vw,
            145px
        )
        0;

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


.project-premium-overview {
    margin-top:
        clamp(
            45px,
            6vw,
            80px
        );
}


.project-premium-grid {
    display:
        grid;

    grid-template-columns:
        minmax(150px, 0.28fr)
        minmax(0, 1fr);

    gap:
        clamp(
            60px,
            9vw,
            150px
        );

    align-items:
        start;
}


/* =========================================================
   PROJECT DETAIL — LABEL
========================================================= */

.project-premium-label {
    display:
        grid;

    gap:
        10px;
}


.project-premium-label
.section-number {
    color:
        var(--cyan);
}


/* =========================================================
   PROJECT DETAIL — COPY
========================================================= */

.project-premium-copy {
    max-width:
        900px;
}


.project-premium-copy h2 {
    max-width:
        760px;

    margin:
        0 0
        clamp(
            35px,
            5vw,
            60px
        );

    color:
        var(--text);

    font-size:
        clamp(
            2.8rem,
            5.6vw,
            5.9rem
        );

    font-weight:
        500;

    line-height:
        0.95;

    letter-spacing:
        -0.06em;
}


.project-premium-copy > p {
    max-width:
        760px;

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.93rem;

    line-height:
        1.9;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.project-feature-list {
    border-top:
        1px solid var(--border);
}


.project-feature-item {
    display:
        grid;

    grid-template-columns:
        60px 1fr;

    align-items:
        center;

    gap:
        20px;

    min-height:
        74px;

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


.project-feature-item > span {
    color:
        var(--cyan);

    font-size:
        0.62rem;

    font-weight:
        700;
}


.project-feature-item strong {
    color:
        var(--text);

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

    font-weight:
        500;

    line-height:
        1.4;
}


/* =========================================================
   TECH GRID
========================================================= */

.project-tech-grid {
    display:
        grid;

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

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

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


.project-tech-grid span {
    min-height:
        105px;

    display:
        flex;

    align-items:
        center;

    padding:
        22px;

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

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

    color:
        var(--text);

    font-size:
        0.8rem;

    font-weight:
        600;
}


/* =========================================================
   DEMO
========================================================= */

.project-premium-demo {
    padding:
        clamp(
            90px,
            11vw,
            160px
        )
        0;

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


.project-demo-card {
    min-height:
        420px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        60px;

    padding:
        clamp(
            40px,
            6vw,
            80px
        );

    background:
        var(--white);

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


.project-demo-card h2 {
    max-width:
        720px;

    margin:
        15px 0 25px;

    color:
        var(--text);

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

    font-weight:
        500;

    line-height:
        0.9;

    letter-spacing:
        -0.07em;
}


.project-demo-card p {
    max-width:
        520px;

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.84rem;

    line-height:
        1.7;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.portfolio-all
.empty-projects {
    padding:
        90px 0;

    text-align:
        left;
}


.portfolio-all
.empty-projects > span {
    display:
        block;

    margin-bottom:
        20px;

    color:
        var(--cyan);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}


.portfolio-all
.empty-projects h2 {
    max-width:
        650px;

    margin:
        0 0 20px;

    color:
        var(--text);

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

    font-weight:
        500;

    line-height:
        0.95;

    letter-spacing:
        -0.06em;
}


.portfolio-all
.empty-projects p {
    max-width:
        500px;

    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        0.84rem;

    line-height:
        1.7;
}


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

@media (max-width: 1050px) {

    .portfolio-hero-grid,
    .project-premium-heading {
        grid-template-columns:
            1fr;
    }


    .portfolio-hero-copy,
    .project-premium-heading p {
        max-width:
            620px;
    }


    .portfolio-featured-grid {
        grid-template-columns:
            1fr;
    }


    .portfolio-project-row > a {
        grid-template-columns:
            50px
            130px
            minmax(
                220px,
                1fr
            )
            45px;
    }


    .portfolio-project-stack {
        display:
            none;
    }


    .project-premium-grid {
        grid-template-columns:
            130px
            minmax(
                0,
                1fr
            );

        gap:
            60px;
    }


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

}


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

@media (max-width: 700px) {

    .portfolio-hero {
        padding:
            85px 0
            65px;
    }


    .portfolio-hero h1 {
        font-size:
            clamp(
                3.8rem,
                16vw,
                6.2rem
            );
    }


    .portfolio-hero-copy {
        padding-bottom:
            0;
    }


    .portfolio-section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        margin-bottom:
            50px;
    }


    .portfolio-featured,
    .portfolio-all {
        padding:
            75px 0;
    }


    .portfolio-card-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .portfolio-project-row > a {
        grid-template-columns:
            42px
            100px
            1fr
            30px;

        gap:
            14px;

        min-height:
            135px;

        padding:
            18px 0;
    }


    .portfolio-project-thumb {
        width:
            100px;
    }


    .portfolio-project-main p {
        display:
            none;
    }


    .portfolio-project-main h3 {
        font-size:
            1.45rem;
    }


    .portfolio-project-arrow {
        font-size:
            1rem;
    }


    .project-premium-hero {
        padding:
            75px 0
            60px;
    }


    .project-premium-hero
    .article-back {
        margin-bottom:
            45px;
    }


    .project-premium-meta {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }


    .project-premium-heading h1 {
        font-size:
            clamp(
                4rem,
                17vw,
                6.5rem
            );
    }


    .project-premium-visual {
        padding-top:
            35px;
    }


    .project-premium-overview,
    .project-premium-section {
        padding:
            75px 0;
    }


    .project-premium-grid {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .project-premium-copy h2 {
        margin-bottom:
            35px;

        font-size:
            clamp(
                2.7rem,
                13vw,
                4.4rem
            );
    }


    .project-tech-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .project-tech-grid span {
        min-height:
            85px;

        padding:
            18px;
    }


    .project-demo-card {
        min-height:
            360px;

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            35px;
    }

}


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

@media (max-width: 480px) {

    .portfolio-project-row > a {
        grid-template-columns:
            34px
            1fr
            24px;

        gap:
            12px;
    }


    .portfolio-project-thumb {
        display:
            none;
    }


    .portfolio-project-main > span {
        margin-bottom:
            6px;
    }


    .portfolio-project-main h3 {
        margin-bottom:
            0;
    }


    .project-tech-grid {
        grid-template-columns:
            1fr;
    }


    .project-feature-item {
        grid-template-columns:
            42px
            1fr;

        min-height:
            65px;
    }


    .project-demo-card h2 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.8rem
            );
    }

}

/* =========================================================
   HOME MOTION — CODELAB
========================================================= */


/* =========================================================
   BASE
========================================================= */

[data-reveal] {
    opacity: 0;

    transform:
        translate3d(
            0,
            28px,
            0
        );

    transition:
        opacity 760ms
        cubic-bezier(
            0.2,
            0.75,
            0.25,
            1
        ),

        transform 760ms
        cubic-bezier(
            0.2,
            0.75,
            0.25,
            1
        );

    transition-delay:
        var(
            --reveal-delay,
            0ms
        );

    will-change:
        opacity,
        transform;
}


[data-reveal].is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


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

.home-hero-reveal,
.home-hero-media {
    opacity: 0;

    transform:
        translate3d(
            0,
            34px,
            0
        );

    transition:
        opacity 900ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),

        transform 900ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

    transition-delay:
        var(
            --hero-delay,
            0ms
        );
}


.home-motion-hero.is-ready
.home-hero-reveal,
.home-motion-hero.is-ready
.home-hero-media {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* =========================================================
   HERO PROFILE / VIDEO
========================================================= */

.hero-profile,
.hero-media {
    --motion-x: 0px;
    --motion-y: 0px;
    --parallax-y: 0px;
}


.hero-profile {
    transform:
        translate3d(
            var(--motion-x),
            calc(
                var(--motion-y)
                + var(--parallax-y)
            ),
            0
        );

    transition:
        transform 300ms ease-out;
}


.hero-media {
    transform:
        translate3d(
            var(--motion-x),
            calc(
                var(--motion-y)
                + var(--parallax-y)
            ),
            0
        );

    transition:
        transform 300ms ease-out;
}


/*
|--------------------------------------------------------------------------
| Enquanto o JS está a atualizar o parallax
|--------------------------------------------------------------------------
*/

.hero-profile.is-parallax-active,
.hero-media.is-parallax-active {
    transition:
        transform 100ms linear;
}


/* =========================================================
   PROFILE IMAGE DEPTH
========================================================= */

.profile-frame img {
    transform:
        scale(1.018);

    transition:
        transform 700ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


.hero-profile:hover
.profile-frame img {
    transform:
        scale(1.03);
}


/* =========================================================
   VIDEO DEPTH
========================================================= */

.video-card {
    transition:
        transform 500ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),

        box-shadow 500ms ease;
}


.hero-media:hover
.video-card {
    transform:
        scale(0.992);

    box-shadow:
        0 30px 70px
        rgba(
            16,
            39,
            45,
            0.12
        );
}


/* =========================================================
   ECOSYSTEM MOTION
========================================================= */

.ecosystem-card {
    position: relative;

    overflow: hidden;

    transition:
        transform 450ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),

        background 450ms ease;
}


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

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        var(--cyan);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 450ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


.ecosystem-card:hover {
    transform:
        translateY(-7px);

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


.ecosystem-card:hover::after {
    transform:
        scaleX(1);
}


/* =========================================================
   GENERIC MOTION CARD
========================================================= */

[data-motion-card] {
    transform-origin:
        center center;
}


/* =========================================================
   HOME PROJECTS
========================================================= */

.home-project-card {
    transition:
        transform 500ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


.home-project-card:hover {
    transform:
        translateY(-8px);
}


.home-project-card
.project-info strong {
    display:
        inline-flex;

    transition:
        transform var(--transition),
        color var(--transition);
}


.home-project-card:hover
.project-info strong {
    color:
        var(--cyan);

    transform:
        translateX(5px);
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.home-philosophy {
    display: grid;

    gap:
        4px;
}


.home-philosophy span {
    display:
        block;
}


/* =========================================================
   MAGNETIC CTA
========================================================= */

.home-magnetic {
    --magnetic-x: 0px;
    --magnetic-y: 0px;

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

    transition:
        background var(--transition),
        color var(--transition),
        transform 180ms ease-out;
}


.home-magnetic span {
    display:
        block;

    transform:
        translate3d(
            calc(
                var(--magnetic-x)
                * 0.25
            ),
            calc(
                var(--magnetic-y)
                * 0.25
            ),
            0
        );

    transition:
        transform 180ms ease-out;
}


/* =========================================================
   SMALL VISUAL ACCENT
========================================================= */

.home-motion-hero::after {
    content: "";

    position: absolute;

    z-index: 0;

    top: 18%;

    left: 54%;

    width: 1px;

    height: 18%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(
                22,
                140,
                145,
                0.24
            ),
            transparent
        );

    pointer-events:
        none;

    opacity:
        0.65;
}


.home-motion-hero
.hero-grid {
    position: relative;

    z-index: 1;
}


/* =========================================================
   MOBILE — REDUZIR MOVIMENTO
========================================================= */

@media (max-width: 820px) {

    .hero-profile,
    .hero-media {
        --motion-x:
            0px !important;

        --motion-y:
            0px !important;

        --parallax-y:
            0px !important;

        transform:
            none;
    }


    .ecosystem-card:hover,
    .home-project-card:hover {
        transform:
            none;
    }


    .home-motion-hero::after {
        display:
            none;
    }

}


/* =========================================================
   PREFERS REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior:
            auto;
    }


    [data-reveal],
    .home-hero-reveal,
    .home-hero-media {
        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    .hero-profile,
    .hero-media,
    .profile-frame img,
    .video-card,
    .ecosystem-card,
    .home-project-card,
    .home-magnetic,
    .home-magnetic span {
        transform:
            none !important;

        transition:
            none !important;
    }

}