/* ============================================================
   VT PULSE — SOBRE / MANIFESTO
============================================================ */

:root {
    --about-primary: #ff3b8d;
    --about-bg: #050507;
    --about-bg-2: #030304;
    --about-panel: #09090c;
    --about-line: rgba(255,255,255,.08);
    --about-muted: #6e6e78;
    --about-soft: #a2a2aa;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        var(--about-bg);

    color:
        #fff;

    font-family:
        'Saira Condensed',
        sans-serif;

    overflow-x:
        hidden;
}


.about-shell {
    width:
        min(
            1500px,
            calc(100% - 70px)
        );

    margin:
        0 auto;
}


.about-section {
    padding:
        120px 0;

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


.about-grid-bg,
.finale-grid-bg {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.026) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.95),
            transparent
        );
}


.about-eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #8a8a94;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2.5px;
}


.about-eyebrow span {
    width:
        30px;

    height:
        2px;

    background:
        var(--about-primary);
}


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

.about-hero {
    position:
        relative;

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

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 78% 32%,
            rgba(255,59,141,.12),
            transparent 28%
        ),
        #050507;
}


.about-hero-code {
    position:
        absolute;

    right:
        -2vw;

    top:
        8%;

    color:
        rgba(255,255,255,.025);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        clamp(
            100px,
            15vw,
            270px
        );

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;

    transform:
        rotate(90deg)
        translateX(65%);

    transform-origin:
        right top;

    user-select:
        none;
}


.about-hero-inner {
    position:
        relative;

    z-index:
        2;

    padding:
        105px 0 95px;
}


.about-hero h1 {
    max-width:
        1280px;

    margin:
        28px 0 58px;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        clamp(
            62px,
            8.4vw,
            150px
        );

    font-weight:
        700;

    line-height:
        .86;

    letter-spacing:
        -5px;

    text-transform:
        uppercase;
}


.about-hero h1 span {
    display:
        block;

    color:
        var(--about-primary);
}


.about-hero-bottom {
    display:
        grid;

    grid-template-columns:
        minmax(300px, 580px)
        auto;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        50px;
}


.about-hero-bottom > p {
    margin:
        0;

    color:
        #9b9ba4;

    font-size:
        22px;

    line-height:
        1.35;
}


.about-signal {
    min-width:
        310px;

    padding:
        17px 20px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

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

    background:
        rgba(5,5,7,.72);
}


.signal-dot {
    width:
        8px;

    height:
        8px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--about-primary);

    box-shadow:
        0 0 18px
        rgba(255,59,141,.75);
}


.about-signal b,
.about-signal small {
    display:
        block;

    font-family:
        'Oswald',
        sans-serif;

    letter-spacing:
        1.4px;
}


.about-signal b {
    font-size:
        10px;
}


.about-signal small {
    margin-top:
        4px;

    color:
        #55555f;

    font-size:
        8px;
}


.about-hero-line {
    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            var(--about-primary) 0 18%,
            rgba(255,255,255,.08) 18%
        );
}


/* ============================================================
   CABEÇALHOS / IDS
============================================================ */

.section-id {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    font-family:
        'Oswald',
        sans-serif;
}


.section-id span {
    color:
        var(--about-primary);

    font-size:
        12px;

    font-weight:
        700;
}


.section-id small {
    color:
        #55555f;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.section-head {
    margin-bottom:
        70px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        30px;
}


.section-head p {
    max-width:
        460px;

    margin:
        0;

    color:
        #51515a;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

    text-align:
        right;
}


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

.intro-section {
    background:
        #050507;
}


.about-split {
    display:
        grid;

    grid-template-columns:
        170px
        1fr;

    gap:
        80px;
}


.statement {
    max-width:
        1120px;
}


.statement-lead {
    max-width:
        760px;

    margin:
        0 0 55px;

    color:
        #96969f;

    font-size:
        21px;

    line-height:
        1.5;
}


.statement h2 {
    margin:
        0;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        clamp(
            48px,
            6vw,
            95px
        );

    line-height:
        .96;

    letter-spacing:
        -2.5px;
}


.statement h2 span {
    display:
        block;

    color:
        #3d3d45;
}


.body-copy {
    max-width:
        700px;

    margin:
        42px 0 0 auto;

    padding-left:
        30px;

    border-left:
        2px solid
        var(--about-primary);

    color:
        #81818b;

    font-size:
        18px;

    line-height:
        1.55;
}


/* ============================================================
   TIMELINE
============================================================ */

.origin-section {
    background:
        var(--about-bg-2);
}


.timeline {
    position:
        relative;

    max-width:
        1200px;

    margin-left:
        auto;
}


.timeline::before {
    content:
        "";

    position:
        absolute;

    left:
        177px;

    top:
        15px;

    bottom:
        20px;

    width:
        1px;

    background:
        linear-gradient(
            to bottom,
            var(--about-primary),
            rgba(255,255,255,.08) 75%,
            var(--about-primary)
        );
}


.timeline-item {
    position:
        relative;

    min-height:
        240px;

    padding-bottom:
        80px;

    display:
        grid;

    grid-template-columns:
        145px
        65px
        1fr;
}


.timeline-year {
    padding-top:
        3px;

    color:
        #29292f;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        40px;

    font-weight:
        700;

    text-align:
        right;
}


.timeline-node {
    position:
        relative;
}


.timeline-node::before {
    content:
        "";

    position:
        absolute;

    left:
        27px;

    top:
        10px;

    width:
        9px;

    height:
        9px;

    background:
        #050507;

    border:
        2px solid
        #55555e;

    transform:
        rotate(45deg);
}


.timeline-highlight
.timeline-node::before,
.timeline-final
.timeline-node::before {
    border-color:
        var(--about-primary);

    background:
        var(--about-primary);

    box-shadow:
        0 0 22px
        rgba(255,59,141,.45);
}


.timeline-copy {
    max-width:
        800px;

    padding:
        0 0 0 35px;
}


.timeline-copy > span {
    color:
        var(--about-primary);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.timeline-copy h3 {
    margin:
        10px 0 20px;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        clamp(
            30px,
            3vw,
            52px
        );

    line-height:
        1;

    letter-spacing:
        -1px;
}


.timeline-copy p {
    margin:
        0 0 18px;

    color:
        #777781;

    font-size:
        17px;

    line-height:
        1.55;
}


.timeline-copy strong {
    color:
        #b6b6bd;

    font-weight:
        600;
}


.timeline-personal {
    margin:
        15px 0 50px;

    padding-top:
        45px;

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

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


.chance-list {
    margin:
        30px 0;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.chance-list span,
.chance-list b {
    padding:
        8px 11px;

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

    color:
        #62626c;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        1.2px;
}


.chance-list b {
    border-color:
        rgba(255,59,141,.35);

    color:
        var(--about-primary);
}


.pulse-birth {
    margin-top:
        32px !important;

    padding:
        25px 0 25px
        28px;

    border-left:
        2px solid
        var(--about-primary);

    color:
        #aaaab2 !important;
}


.pulse-birth b {
    display:
        block;

    margin-top:
        6px;

    color:
        #fff;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        38px;
}


/* ============================================================
   PURPOSE
============================================================ */

.purpose-grid {
    display:
        grid;

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

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

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


.purpose-grid article {
    min-height:
        390px;

    padding:
        38px;

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

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

    transition:
        background .3s ease,
        transform .3s ease;
}


.purpose-grid article:hover {
    background:
        rgba(255,255,255,.025);

    transform:
        translateY(-5px);
}


.purpose-grid article > span {
    color:
        var(--about-primary);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.purpose-grid h3 {
    margin:
        80px 0 24px;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        clamp(
            27px,
            2.5vw,
            40px
        );

    line-height:
        1.03;
}


.purpose-grid p {
    margin:
        0;

    color:
        #6d6d77;

    font-size:
        16px;

    line-height:
        1.5;
}


/* ============================================================
   PRINCIPLES
============================================================ */

.principles-section {
    background:
        #08080b;
}


.principles-grid {
    display:
        grid;

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

    gap:
        1px;

    background:
        var(--about-line);

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


.principles-grid article {
    min-height:
        245px;

    padding:
        34px;

    background:
        #08080b;
}


.principles-grid b {
    color:
        #34343b;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        11px;
}


.principles-grid h3 {
    margin:
        48px 0 15px;

    color:
        #fff;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        25px;

    letter-spacing:
        -.5px;
}


.principles-grid p {
    margin:
        0;

    color:
        #6d6d76;

    font-size:
        15px;

    line-height:
        1.45;
}


/* ============================================================
   TRANSPARENCY
============================================================ */

.transparency-grid {
    display:
        grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:
        100px;
}


.transparency-section h2 {
    margin:
        45px 0 0;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        clamp(
            55px,
            6vw,
            95px
        );

    line-height:
        .9;

    letter-spacing:
        -3px;
}


.transparency-section h2 span {
    display:
        block;

    color:
        var(--about-primary);
}


.transparency-copy {
    padding-top:
        20px;
}


.transparency-copy p {
    margin:
        0;

    padding:
        20px 0;

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

    color:
        #7f7f89;

    font-size:
        18px;
}


.transparency-copy strong {
    color:
        #fff;
}


.transparency-copy blockquote {
    margin:
        45px 0 0;

    padding:
        0 0 0
        28px;

    border-left:
        2px solid
        var(--about-primary);

    color:
        #fff;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        27px;

    line-height:
        1.15;
}


/* ============================================================
   ROADMAP
============================================================ */

.roadmap-section {
    background:
        var(--about-bg-2);
}


.roadmap-track {
    display:
        grid;

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

    gap:
        20px;
}


.roadmap-card {
    position:
        relative;

    min-height:
        300px;

    padding:
        34px;

    overflow:
        hidden;

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


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

    position:
        absolute;

    left:
        0;

    right:
        100%;

    bottom:
        0;

    height:
        2px;

    background:
        var(--about-primary);

    transition:
        right .35s ease;
}


.roadmap-card:hover::after,
.roadmap-card.active::after {
    right:
        0;
}


.roadmap-card > span {
    color:
        #51515a;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}


.roadmap-card h3 {
    margin:
        75px 0 22px;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        43px;
}


.roadmap-card p {
    margin:
        0;

    color:
        #6f6f78;

    font-size:
        16px;

    line-height:
        1.5;
}


.roadmap-card.active {
    border-color:
        rgba(255,59,141,.35);

    background:
        rgba(255,59,141,.035);
}


.roadmap-card.active > span {
    color:
        var(--about-primary);
}


.roadmap-card.ghost {
    opacity:
        .62;
}


/* ============================================================
   FINALE
============================================================ */

.about-finale {
    position:
        relative;

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 20% 70%,
            rgba(255,59,141,.12),
            transparent 28%
        ),
        #050507;
}


.finale-inner {
    position:
        relative;

    z-index:
        2;

    padding:
        110px 0;
}


.finale-kicker {
    color:
        var(--about-primary);

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2.5px;
}


.about-finale h2 {
    max-width:
        1120px;

    margin:
        25px 0 42px;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        clamp(
            58px,
            8vw,
            125px
        );

    line-height:
        .87;

    letter-spacing:
        -4px;
}


.about-finale h2 span {
    display:
        block;

    color:
        var(--about-primary);
}


.about-finale p {
    max-width:
        640px;

    margin:
        0 0 14px;

    color:
        #70707a;

    font-size:
        19px;

    line-height:
        1.45;
}


.about-finale strong {
    display:
        block;

    margin-top:
        35px;

    color:
        #fff;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        18px;

    letter-spacing:
        1px;
}


.finale-actions {
    margin-top:
        55px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.about-btn {
    min-height:
        48px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        22px;

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

    color:
        #fff;

    text-decoration:
        none;

    font-family:
        'Oswald',
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    transition:
        .25s ease;
}


.about-btn b {
    color:
        var(--about-primary);

    font-size:
        15px;
}


.about-btn.primary {
    border-color:
        var(--about-primary);

    background:
        var(--about-primary);
}


.about-btn.primary b {
    color:
        #fff;
}


.about-btn:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--about-primary);
}


/* ============================================================
   REVEAL
============================================================ */

.reveal {
    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity .7s ease,
        transform .7s
        cubic-bezier(.16,1,.3,1);
}


.reveal.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


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

    .reveal {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }

}


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

@media (max-width: 1050px) {

    .about-hero h1 {
        letter-spacing:
            -3px;
    }


    .purpose-grid,
    .principles-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .purpose-grid article:last-child {
        grid-column:
            1 / -1;

        min-height:
            300px;
    }


    .transparency-grid {
        gap:
            55px;
    }

}


@media (max-width: 800px) {

    .about-shell {
        width:
            calc(100% - 30px);
    }


    .about-section {
        padding:
            85px 0;
    }


    .about-hero {
        min-height:
            auto;
    }


    .about-hero-inner {
        padding:
            90px 0 70px;
    }


    .about-hero h1 {
        margin-top:
            22px;

        font-size:
            clamp(
                54px,
                15vw,
                90px
            );

        letter-spacing:
            -3px;
    }


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

        align-items:
            start;
    }


    .about-signal {
        min-width:
            0;

        max-width:
            360px;
    }


    .about-split {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }


    .body-copy {
        margin-left:
            0;
    }


    .section-head {
        align-items:
            start;
    }


    .section-head p {
        max-width:
            300px;
    }


    .timeline {
        margin-left:
            0;
    }


    .timeline::before {
        left:
            15px;
    }


    .timeline-item {
        grid-template-columns:
            45px
            1fr;

        padding-bottom:
            65px;
    }


    .timeline-year {
        position:
            absolute;

        right:
            0;

        top:
            0;

        font-size:
            31px;

        opacity:
            .6;
    }


    .timeline-node {
        grid-column:
            1;

        grid-row:
            1;
    }


    .timeline-node::before {
        left:
            10px;
    }


    .timeline-copy {
        grid-column:
            2;

        padding-left:
            18px;

        padding-right:
            55px;
    }


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


    .roadmap-track {
        grid-template-columns:
            1fr;
    }


    .roadmap-card {
        min-height:
            230px;
    }


    .roadmap-card h3 {
        margin-top:
            45px;
    }


    .about-finale {
        min-height:
            auto;
    }

}


@media (max-width: 600px) {

    .about-hero h1 {
        font-size:
            15vw;

        line-height:
            .91;

        letter-spacing:
            -2px;
    }


    .about-hero-bottom > p {
        font-size:
            19px;
    }


    .section-head {
        flex-direction:
            column;

        margin-bottom:
            50px;
    }


    .section-head p {
        text-align:
            left;
    }


    .statement h2 {
        font-size:
            13vw;

        letter-spacing:
            -2px;
    }


    .statement-lead {
        font-size:
            18px;
    }


    .body-copy {
        font-size:
            17px;
    }


    .timeline-copy {
        padding-right:
            0;
    }


    .timeline-year {
        display:
            none;
    }


    .timeline-copy h3 {
        font-size:
            31px;
    }


    .purpose-grid,
    .principles-grid {
        grid-template-columns:
            1fr;
    }


    .purpose-grid article,
    .purpose-grid article:last-child {
        grid-column:
            auto;

        min-height:
            300px;

        padding:
            28px;
    }


    .purpose-grid h3 {
        margin-top:
            55px;
    }


    .principles-grid article {
        min-height:
            220px;

        padding:
            28px;
    }


    .transparency-section h2 {
        font-size:
            15vw;
    }


    .transparency-copy blockquote {
        font-size:
            23px;
    }


    .about-finale h2 {
        font-size:
            15vw;

        letter-spacing:
            -2px;
    }


    .finale-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .about-btn {
        justify-content:
            space-between;
    }

}