@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");


/* =========================================================
   CONFIGURAÇÕES
========================================================= */

:root {

    --bg: #080810;
    --surface: #11111f;
    --surface-2: #18182a;

    --text: #f7f6ff;
    --muted: #a5a4b8;

    --line: rgba(255,255,255,.10);

    --purple: #8b5cf6;
    --violet: #bd61ff;
    --cyan: #4de9ff;
    --pink: #ff5ca8;
    --lime: #d5ff61;

    --ease: cubic-bezier(.2,.8,.2,1);

}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

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

    font-family: "DM Sans", sans-serif;

    line-height: 1.5;

    overflow-x: hidden;

}


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


button {
    font: inherit;
    color: inherit;
}


::selection {
    background: var(--purple);
    color: white;
}


/* =========================================================
   TEXTURA
========================================================= */

.noise {

    position: fixed;

    inset: 0;

    z-index: 1000;

    pointer-events: none;

    opacity: .035;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}


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

.header {

    height: 82px;

    position: fixed;

    background: #0b0b0b;

    top: 0;
    left: 0;

    width: 100%;

    padding: 0 6vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    z-index: 50;

}


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font:

        700 1.3rem

        "Space Grotesk";

    letter-spacing: -.06em;

}


.logo > span:last-child {

    color: var(--cyan);

}


.logo-mark {

    height: 28px;

    display: flex;

    align-items: flex-end;

    gap: 3px;

}


.logo-mark i {

    display: block;

    width: 7px;

    border-radius: 4px;

    background:

        linear-gradient(

            var(--cyan),

            var(--purple)

        );

    box-shadow:

        0 0 15px

        rgba(77,233,255,.35);

}


.logo-mark i:nth-child(1) {
    height: 17px;
}


.logo-mark i:nth-child(2) {
    height: 28px;
}


.logo-mark i:nth-child(3) {
    height: 21px;
}


.nav {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav a {

    font-size: .85rem;

    color: #aaa9ba;

    transition: .25s;

}


.nav a:hover {

    color: white;

}


.nav-cta {

    padding: 11px 17px;

    border:

        1px solid

        var(--line);

    border-radius: 100px;

    color: white !important;

}


.nav-cta:hover {

    border-color: var(--cyan);

    background:

        rgba(77,233,255,.05);

}


.menu-btn {

    display: none;

    border: 0;

    background: none;

    width: 42px;

    cursor: pointer;

}


.menu-btn b {

    display: block;

    width: 24px;

    height: 2px;

    background: white;

    margin: 5px auto;

    transition: .3s;

}


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

.hero {

    min-height: 820px;

    padding:

        145px

        8vw

        80px;

    display: grid;

    grid-template-columns:

        1.05fr

        .95fr;

    align-items: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(

            circle at 72% 48%,

            rgba(139,92,246,.13),

            transparent 30%

        ),

        radial-gradient(

            circle at 5% 20%,

            rgba(77,233,255,.05),

            transparent 25%

        );

}


.hero-grid {

    position: absolute;

    inset: 0;

    opacity: .4;

    background-image:

        linear-gradient(

            rgba(255,255,255,.03)

            1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.03)

            1px,

            transparent 1px

        );

    background-size: 75px 75px;

    mask-image:

        linear-gradient(

            #000,

            transparent 82%

        );

}


.orb {

    position: absolute;

    border-radius: 50%;

}


.orb-1 {

    width: 10px;

    height: 10px;

    background: var(--cyan);

    left: 47%;

    top: 25%;

    box-shadow:

        0 0 30px var(--cyan);

    animation:

        drift 7s infinite;

}


.orb-2 {

    width: 8px;

    height: 8px;

    background: var(--pink);

    right: 9%;

    top: 55%;

    box-shadow:

        0 0 25px var(--pink);

    animation:

        drift 9s infinite reverse;

}


@keyframes drift {

    50% {

        transform:

            translate(

                30px,

                -35px

            );

    }

}


.hero-copy {

    position: relative;

    z-index: 2;

}


.eyebrow {

    display: flex;

    gap: 9px;

    align-items: center;

    margin-bottom: 25px;

    font-size: .66rem;

    font-weight: 700;

    letter-spacing: .18em;

    color: #9695a8;

}


.eyebrow span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--lime);

    box-shadow:

        0 0 0 6px

        rgba(213,255,97,.07);

    animation: pulse 2s infinite;

}


@keyframes pulse {

    50% {

        box-shadow:

            0 0 0 12px

            rgba(213,255,97,0);

    }

}


.hero h1 {

    font:

        700 clamp(

            4rem,

            7.5vw,

            7.7rem

        )/.86

        "Space Grotesk";

    letter-spacing: -.08em;

}


.hero h1 em,
h2 em {

    font-style: normal;

    color: transparent;

    -webkit-text-stroke:

        1px rgba(255,255,255,.65);

}


.hero-copy > p {

    max-width: 520px;

    color: var(--muted);

    margin: 32px 0;

    font-size: 1rem;

}


.actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}


.btn {

    padding:

        15px

        21px;

    border-radius: 100px;

    font-size: .86rem;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    transition:

        .35s var(--ease);

}


.btn strong {

    margin-left: 14px;

}


.primary {

    background: white;

    color: #090910;

    box-shadow:

        0 15px 40px

        rgba(255,255,255,.06);

}


.primary:hover {

    transform:

        translateY(-4px);

    box-shadow:

        0 20px 45px

        rgba(255,255,255,.12);

}


.ghost {

    border:

        1px solid

        var(--line);

    color: #c5c4d2;

}


.ghost:hover {

    background:

        rgba(255,255,255,.03);

    border-color:

        rgba(255,255,255,.21);

    transform:

        translateY(-3px);

}


.stats {

    display: flex;

    gap: 45px;

    margin-top: 55px;

}


.stats div {

    display: flex;

    flex-direction: column;

}


.stats strong {

    font:

        700 1.3rem

        "Space Grotesk";

}


.stats small {

    font-size: .66rem;

    text-transform: uppercase;

    letter-spacing: .1em;

    color: #777689;

}


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

.hero-visual {

    min-height: 570px;

    display: grid;

    place-items: center;

    position: relative;

}


.showcase {

    width:

        min(

            45vw,

            600px

        );

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    position: relative;

}


.ring {

    position: absolute;

    border:

        1px solid

        rgba(255,255,255,.09);

    border-radius: 50%;

}


.ring-1 {

    width: 83%;

    height: 83%;

    border-top-color:

        var(--cyan);

    animation:

        spin 24s linear infinite;

}


.ring-2 {

    width: 61%;

    height: 61%;

    border-bottom-color:

        var(--pink);

    animation:

        spin 18s linear reverse infinite;

}


@keyframes spin {

    to {

        transform:

            rotate(360deg);

    }

}


.hero-vase {

    width: 145px;

    height: 270px;

    position: relative;

    background:

        linear-gradient(

            145deg,

            #d8b9ff,

            #7542c8 52%,

            #302052

        );

    border-radius:

        38% 38% 45% 45%

        /

        10% 10% 72% 72%;

    box-shadow:

        30px 40px 60px #0009,

        inset 15px 12px 35px #fff2,

        inset -25px -20px 35px #0005;

    transform:

        perspective(500px)

        rotateY(-18deg);

    animation:

        float 5s ease-in-out infinite;

}


.hero-vase i {

    position: absolute;

    width: 63px;

    height: 45px;

    left: 41px;

    top: -19px;

    border-radius: 50%;

    background:

        linear-gradient(

            145deg,

            #bd91ff,

            #5e3aa1

        );

    box-shadow:

        inset 0 5px 10px #fff3;

}


.hero-vase b {

    position: absolute;

    left: 25px;

    top: 35px;

    width: 7px;

    height: 120px;

    border-radius: 10px;

    background: #fff3;

    transform: rotate(10deg);

    filter: blur(1px);

}


@keyframes float {

    50% {

        transform:

            perspective(500px)

            rotateY(-13deg)

            translateY(-15px)

            rotateZ(2deg);

    }

}


.hero-shadow {

    position: absolute;

    width: 180px;

    height: 25px;

    bottom: 23%;

    border-radius: 50%;

    background: #000;

    filter: blur(20px);

    opacity: .5;

}


.floating-tag {

    position: absolute;

    right: 8%;

    top: 13%;

    padding: 9px 13px;

    border:

        1px solid

        var(--line);

    background:

        rgba(14,14,24,.67);

    backdrop-filter: blur(14px);

    border-radius: 100px;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .1em;

    color: var(--lime);

    animation:

        float 4s ease-in-out infinite reverse;

}


.floating-card {

    position: absolute;

    left: 3%;

    bottom: 8%;

    display: flex;

    align-items: center;

    gap: 11px;

    min-width: 215px;

    padding: 13px 15px;

    border:

        1px solid

        var(--line);

    border-radius: 17px;

    background:

        rgba(18,18,33,.76);

    backdrop-filter: blur(18px);

    box-shadow:

        0 20px 60px #0004;

}


.floating-card > span {

    width: 37px;

    height: 37px;

    border-radius: 11px;

    display: grid;

    place-items: center;

    background:

        linear-gradient(

            135deg,

            var(--cyan),

            var(--purple)

        );

    font:

        700 .7rem

        "Space Grotesk";

}


.floating-card div {

    display: flex;

    flex-direction: column;

}


.floating-card strong {

    font-size: .75rem;

}


.floating-card small {

    font-size: .62rem;

    color: #777689;

}


.floating-card > b {

    margin-left: auto;

    color: #777689;

}


/* =========================================================
   TICKER
========================================================= */

.ticker {

    overflow: hidden;

    border-top:

        1px solid

        var(--line);

    border-bottom:

        1px solid

        var(--line);

    padding: 18px 0;

    background: #0a0a12;

}


.ticker-track {

    display: flex;

    width: max-content;

    gap: 28px;

    align-items: center;

    animation:

        ticker 28s linear infinite;

    font:

        600 .72rem

        "Space Grotesk";

    letter-spacing: .15em;

}


.ticker-track b {

    color: var(--cyan);

}


@keyframes ticker {

    to {

        transform:

            translateX(-50%);

    }

}


/* =========================================================
   SEÇÕES
========================================================= */

.section {

    padding:

        130px

        8vw;

    position: relative;

}


.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 60px;

}


.section-heading > div > span,
.about-copy > span,
.center-heading > span,
.contact-content > span {

    font-size: .66rem;

    font-weight: 700;

    letter-spacing: .18em;

    color: #9695a8;

}


.section-heading h2,
.about-copy h2,
.center-heading h2,
.contact-content h2 {

    font:

        700 clamp(

            2.8rem,

            5vw,

            5.7rem

        )/.9

        "Space Grotesk";

    letter-spacing: -.065em;

    margin-top: 18px;

}


.section-heading > p {

    max-width: 370px;

    color: var(--muted);

    font-size: .9rem;

}


/* =========================================================
   CARROSSEL
========================================================= */

.carousel {

    display: flex;

    align-items: center;

    gap: 16px;

}


.carousel-window {

    overflow: hidden;

    width: 100%;

    border-radius: 28px;

}


.carousel-track {

    display: flex;

    gap: 18px;

    transition:

        transform .7s

        var(--ease);

}


.product-card {

    min-width:

        calc(

            (100% - 36px) / 3

        );

    background:

        var(--surface);

    border:

        1px solid

        var(--line);

    border-radius: 28px;

    overflow: hidden;

    transition:

        .45s var(--ease);

}


.product-card:hover {

    transform:

        translateY(-9px);

    border-color:

        rgba(255,255,255,.20);

}


.product-art {

    height: 360px;

    position: relative;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:

        radial-gradient(

            circle,

            rgba(139,92,246,.16),

            transparent 44%

        ),

        linear-gradient(

            135deg,

            #171727,

            #0e0e18

        );

}


.product-art::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            120deg,

            transparent 35%,

            rgba(255,255,255,.07),

            transparent 55%

        );

    transform:

        translateX(-120%);

    transition: 1s;

}


.product-card:hover

.product-art::after {

    transform:

        translateX(120%);

}


/* VASO */

.mini-vase {

    width: 140px;

    height: 205px;

    background:

        linear-gradient(

            145deg,

            #d3a9ff,

            #7142ca 55%,

            #332055

        );

    border-radius:

        38% 38% 42% 42%

        /

        10% 10% 70% 70%;

    box-shadow:

        25px 35px 45px #0008,

        inset 15px 12px 25px #fff3;

    transform: rotate(-7deg);

    position: relative;

}


.mini-vase::before {

    content: "";

    position: absolute;

    width: 54px;

    height: 36px;

    left: 43px;

    top: -15px;

    border-radius: 50%;

    background: #7542c8;

}


/* PLANTA */

.plant-art {

    background:

        radial-gradient(

            circle,

            rgba(77,233,255,.14),

            transparent 40%

        ),

        #11111e;

}


.pot {

    width: 175px;

    height: 125px;

    background:

        linear-gradient(

            135deg,

            #6df0ff,

            #1b91a9 55%,

            #124a57

        );

    border-radius:

        10px

        10px

        35%

        35%;

    position: absolute;

    bottom: 90px;

    box-shadow:

        25px 35px 40px #0008;

}


.pot::after {

    content: "";

    position: absolute;

    left: 16px;

    right: 16px;

    top: 12px;

    height: 18px;

    background: #123e49;

    border-radius: 50%;

}


.leaf {

    position: absolute;

    bottom: 190px;

    width: 10px;

    background:

        linear-gradient(

            #8cffad,

            #2a8d6c

        );

    border-radius: 100%;

    transform-origin: bottom;

}


.l1 {

    height: 100px;

    left: 47%;

    transform: rotate(-24deg);

}


.l2 {

    height: 125px;

    left: 54%;

    transform: rotate(22deg);

}


.l3 {

    height: 82px;

    left: 57%;

    transform: rotate(42deg);

}


/* LUMINÁRIA */

.lamp-art {

    background:

        radial-gradient(

            circle,

            rgba(255,92,168,.17),

            transparent 40%

        ),

        #11111e;

}


.lamp {

    width: 175px;

    height: 175px;

    border:

        23px solid

        #ff7ab9;

    border-radius: 50%;

    box-shadow:

        0 0 55px

        rgba(255,92,168,.33),

        inset 0 0 25px #fff2;

    transform: rotate(-18deg);

}


.lamp::after {

    content: "";

    position: absolute;

    width: 70px;

    height: 25px;

    bottom: -58px;

    left: 29px;

    background: #ff7ab9;

    border-radius: 5px;

}


/* DOCK */

.dock-art {

    background:

        radial-gradient(

            circle,

            rgba(213,255,97,.16),

            transparent 40%

        ),

        #11111e;

}


.dock {

    width: 190px;

    height: 120px;

    border-radius: 22px;

    display: grid;

    place-items: center;

    background:

        linear-gradient(

            145deg,

            #d7f878,

            #78941f 60%,

            #37430e

        );

    font-size: 3rem;

    color: #28330b;

    box-shadow:

        25px 35px 45px #0008;

    transform:

        perspective(400px)

        rotateX(14deg);

}


/* FIGURA */

.figure-art {

    background:

        radial-gradient(

            circle,

            rgba(139,92,246,.22),

            transparent 42%

        ),

        #11111e;

}


.figure {

    width: 130px;

    height: 210px;

    position: relative;

    border-radius:

        45%

        45%

        20%

        20%;

    background:

        linear-gradient(

            145deg,

            #ffbe75,

            #e66b4d 45%,

            #763d89

        );

    box-shadow:

        25px 35px 45px #0008;

}


.figure::before {

    content: "";

    position: absolute;

    width: 90px;

    height: 90px;

    border-radius: 50%;

    top: -55px;

    left: 20px;

    background:

        linear-gradient(

            145deg,

            #ffcf91,

            #db7759 60%,

            #704075

        );

}


.figure i,
.figure b {

    position: absolute;

    width: 28px;

    height: 8px;

    border-radius: 10px;

    background: #33203a;

    top: 26px;

}


.figure i {

    left: 23px;

}


.figure b {

    right: 23px;

}


/* INFO */

.product-info {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    padding:

        22px

        22px

        8px;

}


.product-info small {

    font-size: .62rem;

    color: #747387;

    letter-spacing: .1em;

}


.product-info h3 {

    font:

        600 1.15rem

        "Space Grotesk";

    margin-top: 5px;

}


.product-info > strong {

    font:

        600 .9rem

        "Space Grotesk";

    white-space: nowrap;

}


.product-card > a {

    display: block;

    padding:

        15px

        22px

        21px;

    font-size: .76rem;

    color: #9998a8;

    transition: .25s;

}


.product-card > a:hover {

    color: var(--cyan);

}


.product-card > a span {

    float: right;

}


.carousel-btn {

    flex:

        0 0 48px;

    height: 48px;

    border-radius: 50%;

    border:

        1px solid

        var(--line);

    background:

        var(--surface);

    cursor: pointer;

    transition: .3s;

}


.carousel-btn:hover {

    background: white;

    color: #111;

    transform: scale(1.08);

}


.dots {

    display: flex;

    justify-content: center;

    gap: 7px;

    margin-top: 25px;

}


.dot {

    width: 7px;

    height: 7px;

    border: 0;

    border-radius: 50%;

    background: #3b3a49;

    cursor: pointer;

    transition: .3s;

}


.dot.active {

    width: 23px;

    border-radius: 20px;

    background: var(--cyan);

}


/* =========================================================
   SOBRE
========================================================= */

.about {

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 10vw;

    align-items: center;

    background:

        linear-gradient(

            180deg,

            transparent,

            #0b0b14 50%,

            transparent

        );

}


.about-art {

    min-height: 560px;

    border:

        1px solid

        var(--line);

    border-radius: 28px;

    display: grid;

    place-items: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(

            circle,

            rgba(139,92,246,.20),

            transparent 45%

        ),

        #0d0d17;

}


.about-art > small {

    position: absolute;

    left: 24px;

    bottom: 22px;

    color: #777689;

    letter-spacing: .15em;

    font:

        600 .65rem

        "Space Grotesk";

}


.blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(55px);

    opacity: .5;

}


.blob.purple {

    width: 250px;

    height: 250px;

    background: var(--purple);

    left: 8%;

    top: 8%;

    animation: blob 8s infinite;

}


.blob.cyan {

    width: 200px;

    height: 200px;

    background: var(--cyan);

    right: 5%;

    bottom: 8%;

    animation: blob 10s infinite reverse;

}


@keyframes blob {

    50% {

        transform:

            translate(

                35px,

                -25px

            )

            scale(1.15);

    }

}


/* CUBO */

.cube {

    width: 190px;

    height: 190px;

    position: relative;

    transform-style: preserve-3d;

    transform:

        rotateX(-20deg)

        rotateY(32deg)

        rotateZ(4deg);

    animation:

        cube 12s ease-in-out infinite;

}


.cube i {

    position: absolute;

    inset: 0;

    border:

        2px solid

        rgba(255,255,255,.65);

    background:

        rgba(139,92,246,.10);

}


.cube i:nth-child(1) {

    transform:

        translateZ(95px);

}


.cube i:nth-child(2) {

    transform:

        rotateY(90deg)

        translateZ(95px);

}


.cube i:nth-child(3) {

    transform:

        rotateY(90deg)

        translateZ(-95px);

}


.cube i:nth-child(4) {

    transform:

        rotateX(90deg)

        translateZ(95px);

}


.cube i:nth-child(5) {

    transform:

        rotateX(90deg)

        translateZ(-95px);

}


.cube i:nth-child(6) {

    transform:

        translateZ(-95px);

}


@keyframes cube {

    50% {

        transform:

            rotateX(25deg)

            rotateY(210deg)

            rotateZ(-7deg);

    }

}


.about-copy > p {

    color: var(--muted);

    max-width: 540px;

    margin:

        30px

        0

        38px;

}


.features {

    display: flex;

    flex-direction: column;

}


.features > div {

    display: flex;

    gap: 20px;

    padding: 20px 0;

    border-top:

        1px solid

        var(--line);

}


.features > div > b {

    color: var(--cyan);

    font:

        600 .7rem

        "Space Grotesk";

}


.features span {

    display: flex;

    flex-direction: column;

}


.features strong {

    font:

        600 .9rem

        "Space Grotesk";

}


.features small {

    color: #777689;

    font-size: .75rem;

    margin-top: 3px;

}


/* =========================================================
   PROCESSO
========================================================= */

.process {

    background: #0a0a12;

    border-top:

        1px solid

        var(--line);

    border-bottom:

        1px solid

        var(--line);

}


.center-heading {

    text-align: center;

}


.center-heading p {

    color: var(--muted);

    margin-top: 20px;

}


.steps {

    display: grid;

    grid-template-columns:

        1fr

        auto

        1fr

        auto

        1fr

        auto

        1fr;

    align-items: center;

    margin-top: 75px;

}


.step {

    text-align: center;

    position: relative;

}


.step > small {

    position: absolute;

    top: -28px;

    left: 50%;

    transform:

        translateX(-50%);

    color: #666577;

    font:

        600 .62rem

        "Space Grotesk";

}


.step > div {

    width: 68px;

    height: 68px;

    margin:

        0

        auto

        20px;

    border:

        1px solid

        var(--line);

    border-radius: 22px;

    display: grid;

    place-items: center;

    background:

        linear-gradient(

            135deg,

            #151526,

            #0e0e17

        );

    font-size: 1.3rem;

    transition: .4s;

}


.step:hover > div {

    transform:

        translateY(-7px)

        rotate(-5deg);

    border-color:

        var(--cyan);

    box-shadow:

        0 15px 35px

        rgba(77,233,255,.10);

}


.step h3 {

    font:

        600 1rem

        "Space Grotesk";

}


.step p {

    font-size: .76rem;

    color: #777689;

    max-width: 190px;

    margin: 8px auto;

}


.steps > i {

    width: 55px;

    height: 1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            #444353,

            transparent

        );

}


/* =========================================================
   CONTATO
========================================================= */

.contact {

    min-height: 620px;

    padding:

        120px

        8vw;

    display: grid;

    place-items: center;

    text-align: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(

            circle at 50% 55%,

            rgba(139,92,246,.20),

            transparent 38%

        );

}


.contact-glow {

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: var(--purple);

    filter: blur(140px);

    opacity: .15;

}


.contact-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

}


.contact-content h2 {

    font-size:

        clamp(

            3.5rem,

            7vw,

            7rem

        );

}


.contact-content p {

    color: var(--muted);

    margin:

        28px auto;

    max-width: 570px;

}


.socials {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 35px;

}


.socials a {

    padding:

        13px

        20px;

    border:

        1px solid

        var(--line);

    border-radius: 100px;

    font-size: .78rem;

    font-weight: 700;

    transition: .3s;

}


.socials a:hover {

    transform:

        translateY(-4px);

    border-color:

        var(--cyan);

    background:

        rgba(255,255,255,.03);

}


.socials b {

    margin-left: 12px;

}


.contact-word {

    position: absolute;

    left: 8%;

    top: 25%;

    font:

        700 8rem

        "Space Grotesk";

    color: transparent;

    -webkit-text-stroke:

        1px

        rgba(255,255,255,.03);

    transform:

        rotate(-15deg);

}


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

footer {

    padding:

        45px

        8vw;

    border-top:

        1px solid

        var(--line);

    display: grid;

    grid-template-columns:

        1fr

        auto

        auto;

    gap: 50px;

    align-items: end;

    background: #07070e;

}


footer p {

    color: #666577;

    font-size: .7rem;

    margin-top: 12px;

}


footer nav {

    display: flex;

    gap: 25px;

    font-size: .72rem;

    color: #858494;

}


footer nav a:hover {

    color: white;

}


footer > small {

    font-size: .62rem;

    color: #555463;

}


/* =========================================================
   BOTÃO TOPO
========================================================= */

.back-top {

    position: fixed;

    right: 22px;

    bottom: 22px;

    width: 43px;

    height: 43px;

    border-radius: 50%;

    border:

        1px solid

        var(--line);

    background:

        rgba(15,15,25,.87);

    backdrop-filter: blur(12px);

    cursor: pointer;

    z-index: 30;

    opacity: 0;

    transform:

        translateY(15px);

    pointer-events: none;

    transition: .3s;

}


.back-top.show {

    opacity: 1;

    transform: none;

    pointer-events: auto;

}


.back-top:hover {

    background: white;

    color: #111;

}


/* =========================================================
   ANIMAÇÃO DE ENTRADA
========================================================= */

.reveal {

    opacity: 0;

    transform:

        translateY(25px);

    transition:

        opacity .8s var(--ease),

        transform .8s var(--ease);

}


.reveal.visible {

    opacity: 1;

    transform: none;

}


.delay {

    transition-delay: .15s;

}


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

@media(max-width:1000px) {

    .header {

        padding:

            0 5vw;

    }


    .nav {

        gap: 18px;

    }


    .hero {

        grid-template-columns: 1fr;

    }


    .hero-visual {

        min-height: 500px;

    }


    .showcase {

        width:

            min(

                80vw,

                560px

            );

    }


    .product-card {

        min-width:

            calc(

                (100% - 18px) / 2

            );

    }


    .about {

        gap: 6vw;

    }


    .steps {

        grid-template-columns:

            1fr

            1fr;

        gap:

            65px

            20px;

    }


    .steps > i {

        display: none;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:720px) {

    .header {

        height: 72px;

    }


    .menu-btn {

        display: block;

    }


    .nav {

        position: absolute;

        top: 72px;

        left: 4vw;

        right: 4vw;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 12px;

        background:

            rgba(13,13,24,.96);

        backdrop-filter: blur(20px);

        border:

            1px solid

            var(--line);

        border-radius: 20px;

        opacity: 0;

        transform:

            translateY(-10px);

        pointer-events: none;

        transition: .3s;

    }


    .nav.open {

        opacity: 1;

        transform: none;

        pointer-events: auto;

    }


    .nav a {

        padding: 13px;

    }


    .nav-cta {

        text-align: center;

    }


    .hero {

        padding:

            120px

            5vw

            60px;

    }


    .hero h1 {

        font-size:

            clamp(

                3.5rem,

                17vw,

                5.5rem

            );

    }


    .hero-copy > p {

        font-size: .92rem;

    }


    .stats {

        gap: 25px;

        margin-top: 40px;

    }


    .hero-visual {

        min-height: 420px;

    }


    .showcase {

        width: 95vw;

    }


    .floating-card {

        left: 0;

        bottom: 2%;

        min-width: 195px;

    }


    .floating-tag {

        right: 0;

    }


    .section {

        padding:

            90px

            5vw;

    }


    .section-heading {

        display: block;

        margin-bottom: 40px;

    }


    .section-heading > p {

        margin-top: 25px;

    }


    .carousel-btn {

        display: none;

    }


    .carousel-window {

        border-radius: 22px;

    }


    .product-card {

        min-width: 100%;

        border-radius: 22px;

    }


    .product-art {

        height: 330px;

    }


    .about {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .about-art {

        min-height: 400px;

    }


    .cube {

        transform:

            scale(.75)

            rotateX(-20deg)

            rotateY(32deg);

    }


    .steps {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .step p {

        max-width: 280px;

    }


    .contact {

        min-height: 570px;

        padding:

            100px

            5vw;

    }


    .contact-word {

        font-size: 5rem;

    }


    footer {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    footer nav {

        flex-wrap: wrap;

    }

}


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

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

    * {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}

.hero-logo {
    position: relative;
    z-index: 5;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: logoFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 25px rgba(100, 220, 255, 0.35));
}

.hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    animation: logoGlow 3s ease-in-out infinite alternate;
}

@keyframes logoFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-14px) rotate(2deg);
    }
}

@keyframes logoGlow {
    0% {
        filter: drop-shadow(0 0 10px rgba(80, 210, 255, 0.25));
    }

    100% {
        filter: drop-shadow(0 0 35px rgba(170, 90, 255, 0.7));
    }
}