:root {

    --blue: #087fd1;
    --blue-dark: #03568f;
    --blue-light: #5ebfff;

    --cyan: #10c9bd;
    --cyan-light: #a4fff4;

    --green: #22c994;

    --dark: #031b24;
    --dark-soft: #062d38;
    --dark-light: #0b4450;

    --text: #18383f;
    --muted: #73888c;

    --white: #ffffff;

    --background: #f7fcfc;

    --border:
        rgba(0,70,80,.08);

    --shadow:
        0 25px 60px
        rgba(0,55,65,.10);

}



* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    overflow-x: hidden;

    color: var(--text);

    background:
        var(--background);

    font-family:
        "Inter",
        sans-serif;

}


body.menu-open,
body.search-open {

    overflow: hidden;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
select,
textarea {

    font: inherit;

}


button {

    border: 0;

}


img {

    display: block;

    max-width: 100%;

}


svg {

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


::selection {

    color: white;

    background:
        var(--blue);

}


.container {

    width:
        min(
            1220px,
            calc(100% - 40px)
        );

    margin: auto;

}




::-webkit-scrollbar {

    width: 10px;

}


::-webkit-scrollbar-track {

    background:
        #edf5f5;

}


::-webkit-scrollbar-thumb {

    border:
        2px solid #edf5f5;

    border-radius: 999px;

    background:

        linear-gradient(
            var(--blue),
            var(--cyan)
        );

}




.preloader {

    position: fixed;

    z-index: 99999;

    inset: 0;

    display: flex;

    flex-direction: column;

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

    background:

        radial-gradient(
            circle at 50% 40%,
            #0b4a57,
            #02161c 55%,
            #010c10
        );

    transition:

        opacity .8s ease,
        visibility .8s ease;

}


.preloader.hide {

    opacity: 0;

    visibility: hidden;

}


.preloader-logo {

    width: 85px;
    height: 85px;

    overflow: hidden;

    border-radius: 25px;

    box-shadow:

        0 0 0 1px
        rgba(255,255,255,.08),

        0 25px 70px
        rgba(16,201,189,.25);

    animation:

        preloaderLogo
        2.3s ease-in-out infinite;

}


.preloader-logo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.1);

}


@keyframes preloaderLogo {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(4deg);

    }

}


.preloader-text {

    margin-top: 25px;

    display: flex;

    gap: 7px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    letter-spacing:
        4px;

}


.preloader-text strong {

    color:
        var(--cyan-light);

}


.preloader-line {

    position: relative;

    width: 190px;
    height: 2px;

    margin-top: 23px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,.08);

}


.preloader-line span {

    position: absolute;

    width: 45%;
    height: 100%;

    border-radius: inherit;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            var(--blue),
            transparent
        );

    animation:
        loadingLine
        1.6s linear infinite;

}


@keyframes loadingLine {

    from {

        left: -50%;

    }

    to {

        left: 110%;

    }

}


/* =========================================================
   BACKGROUND
========================================================= */

.page-background {

    position: fixed;

    z-index: -50;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.background-grid {

    position: absolute;

    inset: 0;

    opacity: .025;

    background-image:

        linear-gradient(
            rgba(8,127,209,.8) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(8,127,209,.8) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


.background-orb {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(25px);

}


.orb-one {

    width: 720px;
    height: 720px;

    top: -320px;
    right: -270px;

    background:

        radial-gradient(
            circle,
            rgba(16,201,189,.17),
            transparent 68%
        );

    animation:
        orbFloat
        12s ease-in-out infinite;

}


.orb-two {

    width: 720px;
    height: 720px;

    bottom: -370px;
    left: -340px;

    background:

        radial-gradient(
            circle,
            rgba(8,127,209,.13),
            transparent 68%
        );

    animation:
        orbFloat
        15s ease-in-out infinite reverse;

}


.orb-three {

    width: 440px;
    height: 440px;

    top: 45%;
    left: 45%;

    background:

        radial-gradient(
            circle,
            rgba(94,191,255,.07),
            transparent 68%
        );

    animation:
        orbFloat
        18s ease-in-out infinite;

}


@keyframes orbFloat {

    0%,
    100% {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    50% {

        transform:
            translate3d(35px,-28px,0)
            scale(1.08);

    }

}


.cursor-light {

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    opacity: 0;

    background:

        radial-gradient(
            circle,
            rgba(16,201,189,.08),
            rgba(8,127,209,.035) 40%,
            transparent 68%
        );

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

    transition:
        opacity .3s ease;

}


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

.header {

    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;

    border-bottom:
        1px solid
        rgba(0,70,80,.05);

    background:
        rgba(255,255,255,.74);

    backdrop-filter:
        blur(23px);

    transition:
        .35s ease;

}


.header.scrolled {

    background:
        rgba(255,255,255,.91);

    box-shadow:

        0 14px 42px
        rgba(0,55,65,.08);

}


.header-content {

    min-height: 82px;

    display: flex;

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

    gap: 25px;

}


.logo {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


.logo-symbol {

    width: 48px;
    height: 48px;

    overflow: hidden;

    border-radius: 15px;

    background:
        white;

    box-shadow:

        0 10px 28px
        rgba(8,127,209,.16);

    transition:
        .3s ease;

}


.logo:hover
.logo-symbol {

    transform:
        translateY(-3px)
        rotate(-4deg);

}


.logo-symbol img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.1);

}


.logo-text {

    display: flex;

    flex-direction: column;

}


.logo-main {

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 20px;

    font-weight: 800;

    letter-spacing:
        -.6px;

}


.logo-main strong {

    color:
        var(--blue);

}


.logo-text small {

    margin-top: 2px;

    color:
        #8a9c9f;

    font-size: 7px;

    font-weight: 600;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

}


.navigation {

    display: flex;

    align-items: center;

    gap: 4px;

}


.nav-link {

    position: relative;

    padding:
        10px 12px;

    border-radius: 10px;

    color:
        #60777c;

    font-size: 10px;

    font-weight: 700;

    transition:
        .3s ease;

}


.nav-link::after {

    content: "";

    position: absolute;

    right: 12px;
    bottom: 5px;
    left: 12px;

    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    transform:
        scaleX(0);

    transition:
        transform .3s ease;

}


.nav-link:hover,
.nav-link.active {

    color:
        var(--blue);

    background:
        rgba(8,127,209,.045);

}


.nav-link:hover::after,
.nav-link.active::after {

    transform:
        scaleX(1);

}


.header-actions {

    display: flex;

    align-items: center;

    gap: 9px;

}


.search-trigger {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

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

    border-radius: 13px;

    color:
        var(--dark);

    background:
        rgba(255,255,255,.75);

    cursor: pointer;

    transition:
        .3s ease;

}


.search-trigger:hover {

    color: white;

    border-color:
        var(--blue);

    background:
        var(--blue);

    transform:
        translateY(-3px);

}


.search-trigger svg {

    width: 18px;
    height: 18px;

}


.header-whatsapp {

    min-height: 43px;

    padding:
        0 15px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    border-radius: 13px;

    color: white;

    background:

        linear-gradient(
            135deg,
            #0ebd72,
            #20d894
        );

    box-shadow:

        0 11px 25px
        rgba(22,185,111,.18);

    font-size: 10px;

    font-weight: 800;

    transition:
        .3s ease;

}


.header-whatsapp:hover {

    transform:
        translateY(-3px);

    box-shadow:

        0 16px 33px
        rgba(22,185,111,.27);

}


.header-whatsapp svg {

    width: 18px;
    height: 18px;

    fill: currentColor;

    stroke: none;

}


.mobile-menu-button {

    width: 43px;
    height: 43px;

    display: none;

    place-items: center;

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

    border-radius: 13px;

    background:
        white;

    cursor: pointer;

}


.mobile-menu-button span {

    display: block;

    width: 18px;
    height: 2px;

    margin: 3px auto;

    border-radius: 999px;

    background:
        var(--dark);

    transition:
        .3s ease;

}


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

.hero {

    position: relative;

    min-height: 970px;

    padding:
        145px 0 85px;

    display: flex;

    align-items: center;

    overflow: hidden;

}


#threeCanvas {

    position: absolute;

    z-index: -3;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: .45;

}


.hero-overlay {

    position: absolute;

    z-index: -2;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(248,253,253,.97) 0%,
            rgba(248,253,253,.86) 42%,
            rgba(248,253,253,.34) 75%,
            rgba(248,253,253,.92) 100%
        );

}


.hero-container {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items: center;

    gap: 80px;

}


.hero-content {

    max-width: 710px;

}


.hero-badge {

    width: fit-content;

    margin-bottom: 22px;

    padding:
        9px 14px;

    display: flex;

    align-items: center;

    gap: 9px;

    border:
        1px solid
        rgba(8,127,209,.12);

    border-radius: 999px;

    color:
        var(--blue-dark);

    background:
        rgba(255,255,255,.76);

    box-shadow:

        0 10px 30px
        rgba(0,70,80,.045);

    backdrop-filter:
        blur(13px);

    font-size: 10px;

    font-weight: 800;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


.hero-badge-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:

        0 0 14px
        rgba(34,201,148,.8);

    animation:
        badgePulse
        1.6s ease-in-out infinite;

}


@keyframes badgePulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.65);

        opacity: .45;

    }

}


.hero h1 {

    margin: 0;

    max-width: 760px;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:

        clamp(
            48px,
            6vw,
            82px
        );

    font-weight: 800;

    line-height: .98;

    letter-spacing:
        -4.7px;

}


.hero h1 span {

    display: block;

    margin-top: 10px;

    background:

        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color: transparent;

}


.hero-content > p {

    max-width: 650px;

    margin-top: 28px;

    color:
        #5f797e;

    font-size: 15px;

    line-height: 1.9;

}


.hero-actions {

    margin-top: 31px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.button {

    min-height: 56px;

    padding:
        0 24px;

    display: inline-flex;

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

    gap: 10px;

    border-radius: 15px;

    font-size: 10px;

    font-weight: 800;

    transition:
        .3s ease;

}


.button svg {

    width: 18px;
    height: 18px;

}


.button-primary {

    color: white;

    background:

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

    box-shadow:

        0 18px 40px
        rgba(8,127,209,.23);

}


.button-primary:hover {

    transform:
        translateY(-4px);

    box-shadow:

        0 23px 50px
        rgba(8,127,209,.31);

}


.button-secondary {

    border:
        1px solid
        rgba(0,70,80,.1);

    color:
        var(--dark);

    background:
        rgba(255,255,255,.86);

}


.button-secondary:hover {

    color:
        var(--blue);

    border-color:
        var(--blue);

    transform:
        translateY(-3px);

}


.button-white {

    color:
        var(--dark);

    background:
        white;

}


.button-white:hover {

    transform:
        translateY(-4px);

    box-shadow:

        0 18px 35px
        rgba(0,0,0,.12);

}


.hero-stats {

    margin-top: 43px;

    display: grid;

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

}


.hero-stat {

    padding-right: 23px;

}


.hero-stat +
.hero-stat {

    padding-left: 23px;

    border-left:
        1px solid
        rgba(0,70,80,.1);

}


.hero-stat strong {

    display: block;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 22px;

}


.hero-stat span {

    display: block;

    margin-top: 4px;

    max-width: 100px;

    color:
        #839598;

    font-size: 8px;

    line-height: 1.5;

}


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

.hero-visual {

    position: relative;

    min-height: 650px;

    display: grid;

    place-items: center;

    perspective:
        1300px;

}


.hero-orbit {

    position: absolute;

    border:
        1px solid
        rgba(8,127,209,.12);

    border-radius: 50%;

}


.orbit-large {

    width: 565px;
    height: 565px;

    animation:
        orbitRotate
        25s linear infinite;

}


.orbit-medium {

    width: 440px;
    height: 440px;

    border-style: dashed;

    border-color:
        rgba(16,201,189,.21);

    animation:
        orbitRotate
        18s linear infinite reverse;

}


.orbit-small {

    width: 305px;
    height: 305px;

    opacity: .55;

    animation:
        orbitRotate
        14s linear infinite;

}


@keyframes orbitRotate {

    to {

        transform:
            rotate(360deg);

    }

}


.hero-machine-glow {

    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(16,201,189,.2),
            rgba(8,127,209,.07) 42%,
            transparent 70%
        );

    animation:
        machineGlow
        4s ease-in-out infinite;

}


@keyframes machineGlow {

    0%,
    100% {

        transform:
            scale(.94);

        opacity: .65;

    }

    50% {

        transform:
            scale(1.07);

        opacity: 1;

    }

}


.hero-equipment {

    position: relative;

    z-index: 7;

    width: 390px;
    height: 470px;

    transform-style:
        preserve-3d;

    transform:
        rotateY(-10deg)
        rotateX(3deg);

    animation:
        equipmentFloat
        5.5s ease-in-out infinite;

    transition:
        transform .15s ease-out;

}


@keyframes equipmentFloat {

    0%,
    100% {

        translate:
            0 0;

    }

    50% {

        translate:
            0 -19px;

    }

}


.equipment-monitor {

    position: absolute;

    top: 0;
    left: 50%;

    width: 330px;
    height: 230px;

    padding: 13px;

    border-radius: 31px;

    background:

        linear-gradient(
            120deg,
            #bdced1,
            #ffffff 34%,
            #e8f1f2 65%,
            #91a5aa
        );

    box-shadow:

        -28px 35px 55px
        rgba(0,55,65,.20),

        inset 11px 10px 20px
        rgba(255,255,255,.9);

    transform:
        translateX(-50%);

}


.equipment-screen {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 20px;

    background:

        radial-gradient(
            circle at 50% 50%,
            #075766,
            #052b34 55%,
            #021319
        );

}


.screen-status {

    position: absolute;

    z-index: 5;

    top: 14px;
    left: 16px;

    color:
        var(--cyan-light);

    font-size: 7px;

    font-weight: 700;

    letter-spacing:
        1px;

}


.screen-wave {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 230px;
    height: 90px;

    display: flex;

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

    gap: 9px;

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

}


.screen-wave span {

    width: 4px;

    border-radius: 999px;

    background:

        linear-gradient(
            var(--cyan-light),
            var(--blue)
        );

    box-shadow:

        0 0 13px
        rgba(16,201,189,.65);

    animation:
        waveBar
        1.25s ease-in-out infinite;

}


.screen-wave span:nth-child(1) {

    height: 23px;

}


.screen-wave span:nth-child(2) {

    height: 47px;

    animation-delay: .1s;

}


.screen-wave span:nth-child(3) {

    height: 73px;

    animation-delay: .2s;

}


.screen-wave span:nth-child(4) {

    height: 44px;

    animation-delay: .3s;

}


.screen-wave span:nth-child(5) {

    height: 80px;

    animation-delay: .4s;

}


.screen-wave span:nth-child(6) {

    height: 52px;

    animation-delay: .5s;

}


.screen-wave span:nth-child(7) {

    height: 35px;

    animation-delay: .6s;

}


.screen-wave span:nth-child(8) {

    height: 20px;

    animation-delay: .7s;

}


@keyframes waveBar {

    0%,
    100% {

        transform:
            scaleY(.6);

        opacity: .55;

    }

    50% {

        transform:
            scaleY(1.2);

        opacity: 1;

    }

}


.screen-scan {

    position: absolute;

    left: 15px;
    right: 15px;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--cyan-light),
            transparent
        );

    box-shadow:

        0 0 15px
        var(--cyan);

    animation:
        screenScan
        2.3s linear infinite;

}


@keyframes screenScan {

    0% {

        top: 10%;

        opacity: 0;

    }

    20% {

        opacity: 1;

    }

    80% {

        opacity: 1;

    }

    100% {

        top: 90%;

        opacity: 0;

    }

}


.equipment-neck {

    position: absolute;

    top: 218px;
    left: 50%;

    width: 45px;
    height: 80px;

    border-radius: 16px;

    background:

        linear-gradient(
            90deg,
            #94aaae,
            #f6fbfb 50%,
            #8aa1a5
        );

    transform:
        translateX(-50%);

}


.equipment-body {

    position: absolute;

    top: 278px;
    left: 50%;

    width: 270px;
    height: 150px;

    border-radius:
        25px 25px 38px 38px;

    background:

        linear-gradient(
            140deg,
            #d5e2e4,
            #ffffff 45%,
            #9aafb2
        );

    box-shadow:

        -20px 27px 40px
        rgba(0,55,65,.16);

    transform:
        translateX(-50%)
        perspective(500px)
        rotateX(8deg);

}


.equipment-buttons {

    position: absolute;

    top: 34px;
    left: 50%;

    display: flex;

    gap: 14px;

    transform:
        translateX(-50%);

}


.equipment-buttons span {

    width: 23px;
    height: 23px;

    border-radius: 50%;

    background:
        #83989c;

}


.equipment-buttons span:nth-child(2) {

    background:
        var(--blue);

}


.equipment-buttons span:nth-child(3) {

    background:
        var(--cyan);

}


.equipment-control {

    position: absolute;

    left: 50%;
    bottom: 21px;

    width: 58px;
    height: 58px;

    border:
        9px solid #b4c5c7;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            #91aaad
        );

    transform:
        translateX(-50%);

}


.equipment-shadow {

    position: absolute;

    z-index: 2;

    bottom: 75px;

    width: 320px;
    height: 45px;

    border-radius: 50%;

    background:
        rgba(0,35,45,.14);

    filter:
        blur(17px);

    animation:
        equipmentShadow
        5.5s ease-in-out infinite;

}


@keyframes equipmentShadow {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .7;

    }

    50% {

        transform:
            scale(.82);

        opacity: .42;

    }

}


.hero-floating-card {

    position: absolute;

    z-index: 15;

    min-width: 180px;

    padding: 14px;

    display: flex;

    align-items: center;

    gap: 11px;

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

    border-radius: 16px;

    background:
        rgba(255,255,255,.74);

    box-shadow:

        0 18px 45px
        rgba(0,60,70,.12);

    backdrop-filter:
        blur(16px);

}


.floating-card-one {

    top: 90px;
    left: -15px;

    animation:
        floatingSmall
        5s ease-in-out infinite;

}


.floating-card-two {

    right: -18px;
    bottom: 110px;

    animation:
        floatingSmall
        6s 1s ease-in-out infinite;

}


@keyframes floatingSmall {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-11px);

    }

}


.floating-card-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 13px;

    color: white;

    background:

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

    font-family:
        "Manrope",
        sans-serif;

    font-size: 10px;

    font-weight: 800;

}


.hero-floating-card strong,
.hero-floating-card span {

    display: block;

}


.hero-floating-card strong {

    color:
        var(--dark);

    font-size: 9px;

}


.hero-floating-card span {

    margin-top: 4px;

    color:
        #829599;

    font-size: 8px;

}


.online-dot {

    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:

        0 0 14px
        rgba(34,201,148,.7);

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position: absolute;

    z-index: 5;

    bottom: 32px;
    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color:
        #82969a;

    font-size: 7px;

    font-weight: 700;

    letter-spacing:
        1.4px;

    text-transform:
        uppercase;

    transform:
        translateX(-50%);

}


.scroll-mouse {

    position: relative;

    width: 23px;
    height: 35px;

    border:
        1px solid
        rgba(0,70,80,.25);

    border-radius: 999px;

}


.scroll-mouse i {

    position: absolute;

    top: 7px;
    left: 50%;

    width: 3px;
    height: 7px;

    border-radius: 999px;

    background:
        var(--blue);

    transform:
        translateX(-50%);

    animation:
        mouseScroll
        1.5s infinite;

}


@keyframes mouseScroll {

    0% {

        opacity: 0;

        transform:
            translate(-50%,0);

    }

    30% {

        opacity: 1;

    }

    100% {

        opacity: 0;

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

    }

}


/* =========================================================
   MARQUEE
========================================================= */

.technology-marquee {

    overflow: hidden;

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

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

    background:
        white;

}


.marquee-track {

    width: max-content;

    min-height: 80px;

    display: flex;

    align-items: center;

    gap: 35px;

    animation:
        marqueeMove
        30s linear infinite;

}


.marquee-track span {

    color:
        #48666b;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 11px;

    font-weight: 800;

    letter-spacing:
        1.5px;

}


.marquee-track i {

    color:
        var(--cyan);

    font-style: normal;

}


@keyframes marqueeMove {

    to {

        transform:
            translateX(-50%);

    }

}


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

.section {

    position: relative;

    padding:
        130px 0;

}


.section-heading {

    margin-bottom: 56px;

    display: flex;

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

    gap: 70px;

}


.section-heading > div {

    max-width: 760px;

}


.section-heading > p {

    max-width: 430px;

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.8;

}


.section-label {

    display: block;

    margin-bottom: 14px;

    color:
        var(--blue);

    font-size: 9px;

    font-weight: 800;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

}


.section-heading h2,
.benefits-content h2 {

    margin: 0;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:

        clamp(
            37px,
            4vw,
            54px
        );

    line-height: 1.08;

    letter-spacing:
        -2.7px;

}


.centered-heading {

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 18px;

}


.centered-heading > p {

    max-width: 600px;

}


/* =========================================================
   CATEGORIES
========================================================= */

.categories-section {

    background:
        white;

}


.categories-grid {

    display: grid;

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

    gap: 18px;

}


.category-card {

    position: relative;

    min-height: 345px;

    padding: 30px;

    overflow: hidden;

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

    border-radius: 25px;

    background:
        #fbfefe;

    cursor: pointer;

    transition:
        .4s ease;

}


.category-card::before {

    content: "";

    position: absolute;

    right: -80px;
    bottom: -80px;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background:
        var(--cyan);

    filter:
        blur(75px);

    opacity: .08;

    transition:
        .4s ease;

}


.category-card:hover {

    border-color:
        rgba(8,127,209,.2);

    box-shadow:
        var(--shadow);

    transform:
        translateY(-8px);

}


.category-card:hover::before {

    opacity: .18;

}


.featured-category {

    color: white;

    border-color:
        transparent;

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(16,201,189,.2),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #032029,
            #07505c
        );

}


.category-number {

    position: absolute;

    top: 25px;
    right: 28px;

    color:
        rgba(8,127,209,.16);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 40px;

    font-weight: 800;

}


.featured-category
.category-number {

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

}


.category-icon {

    width: 59px;
    height: 59px;

    margin-bottom: 35px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    color:
        var(--blue);

    background:
        #eaf8f8;

    transition:
        .35s ease;

}


.category-icon svg {

    width: 28px;
    height: 28px;

}


.featured-category
.category-icon {

    color:
        var(--cyan-light);

    background:
        rgba(255,255,255,.08);

}


.category-card:hover
.category-icon {

    transform:
        rotate(-6deg)
        scale(1.08);

}


.category-card h3 {

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 20px;

}


.featured-category h3 {

    color: white;

}


.category-card p {

    margin-top: 12px;

    color:
        var(--muted);

    font-size: 10px;

    line-height: 1.75;

}


.featured-category p {

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

}


.category-link {

    position: absolute;

    left: 30px;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        var(--blue);

    background: none;

    cursor: pointer;

    font-size: 9px;

    font-weight: 800;

}


.featured-category
.category-link {

    color:
        var(--cyan-light);

}


.category-link span {

    transition:
        .3s ease;

}


.category-link:hover span {

    transform:
        translateX(5px);

}


/* =========================================================
   PROMOTION
========================================================= */

.promotion-section {

    padding:
        0 0 130px;

    background:
        white;

}


.promotion-card {

    position: relative;

    min-height: 430px;

    padding: 68px;

    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: center;

    gap: 60px;

    overflow: hidden;

    border-radius: 36px;

    color: white;

    background:

        radial-gradient(
            circle at 82% 18%,
            rgba(16,201,189,.24),
            transparent 30%
        ),

        linear-gradient(
            125deg,
            #03232d,
            #06606d
        );

    box-shadow:

        0 35px 85px
        rgba(0,55,65,.17);

}


.promotion-grid {

    position: absolute;

    inset: 0;

    opacity: .035;

    background-image:

        linear-gradient(
            rgba(255,255,255,.8) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.8) 1px,
            transparent 1px
        );

    background-size:
        44px 44px;

}


.promotion-glow {

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -130px;

    border-radius: 50%;

    background:
        var(--cyan);

    filter:
        blur(120px);

    opacity: .1;

}


.promotion-content {

    position: relative;

    z-index: 3;

    max-width: 700px;

}


.promotion-tag {

    display: inline-flex;

    margin-bottom: 17px;

    padding:
        7px 11px;

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

    border-radius: 999px;

    color:
        var(--cyan-light);

    background:
        rgba(255,255,255,.055);

    font-size: 8px;

    font-weight: 800;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.promotion-content h2 {

    margin: 0;

    max-width: 720px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:

        clamp(
            37px,
            4.2vw,
            56px
        );

    line-height: 1.04;

    letter-spacing:
        -2.8px;

}


.promotion-content p {

    max-width: 610px;

    margin:
        20px 0 28px;

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

    font-size: 12px;

    line-height: 1.8;

}


.promotion-visual {

    position: relative;

    z-index: 3;

}


.promotion-ring {

    position: relative;

    width: 250px;
    height: 250px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);

}


.promotion-ring::before {

    content: "";

    position: absolute;

    inset: 27px;

    border:
        1px dashed
        rgba(164,255,244,.3);

    border-radius: 50%;

    animation:
        orbitRotate
        14s linear infinite;

}


.promotion-ring div {

    position: relative;

    z-index: 3;

    text-align: center;

}


.promotion-ring small,
.promotion-ring span {

    display: block;

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

    font-size: 8px;

}


.promotion-ring strong {

    display: block;

    margin:
        7px 0;

    color:
        var(--cyan-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 46px;

}


/* =========================================================
   PRODUCTS
========================================================= */

.products-section {

    background:
        #f5fbfb;

}


.product-toolbar {

    margin-bottom: 35px;

    display: flex;

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

    gap: 25px;

}


.product-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.filter-button {

    padding:
        10px 15px;

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

    border-radius: 999px;

    color:
        #667f83;

    background:
        rgba(255,255,255,.76);

    cursor: pointer;

    font-size: 9px;

    font-weight: 700;

    transition:
        .3s ease;

}


.filter-button:hover,
.filter-button.active {

    color: white;

    border-color:
        transparent;

    background:

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

    box-shadow:

        0 10px 23px
        rgba(8,127,209,.17);

}


.product-search {

    min-width: 270px;
    height: 44px;

    padding:
        0 15px;

    display: flex;

    align-items: center;

    gap: 10px;

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

    border-radius: 14px;

    background:
        white;

    transition:
        .3s ease;

}


.product-search:focus-within {

    border-color:
        rgba(8,127,209,.3);

    box-shadow:

        0 0 0 4px
        rgba(8,127,209,.05);

}


.product-search svg {

    width: 17px;
    height: 17px;

    color:
        #84989b;

}


.product-search input {

    width: 100%;

    border: 0;

    outline: 0;

    color:
        var(--dark);

    background:
        transparent;

    font-size: 10px;

}


.product-search input::placeholder {

    color:
        #9aa9ab;

}


.products-grid {

    display: grid;

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

    gap: 20px;

}


.product-card {

    position: relative;

    overflow: hidden;

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

    border-radius: 25px;

    background:
        white;

    box-shadow:

        0 10px 30px
        rgba(0,55,65,.035);

    transition:
        .4s ease;

}


.product-card:hover {

    border-color:
        rgba(8,127,209,.18);

    box-shadow:

        0 26px 60px
        rgba(0,55,65,.11);

    transform:
        translateY(-9px);

}


.product-card.hidden {

    display: none;

}


.product-image-link {

    display: block;

}


.product-image {

    position: relative;

    height: 265px;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 45%,
            #f8ffff,
            #e9f7f6 55%,
            #edf4f7
        );

}


.product-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 60%,
            rgba(3,27,36,.05)
        );

}


.product-image img {

    position: relative;

    z-index: 3;

    max-width: 88%;
    max-height: 84%;

    object-fit: contain;

    filter:

        drop-shadow(
            0 22px 23px
            rgba(0,55,65,.13)
        );

    transition:
        .45s ease;

}


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

    transform:
        translateY(-7px)
        scale(1.06);

}


.product-image-glow {

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        var(--cyan);

    filter:
        blur(85px);

    opacity: .08;

    transition:
        .4s ease;

}


.product-card:hover
.product-image-glow {

    opacity: .16;

    transform:
        scale(1.2);

}


.product-badge {

    position: absolute;

    z-index: 7;

    top: 16px;
    left: 16px;

    padding:
        7px 10px;

    border-radius: 9px;

    color: white;

    background:
        var(--blue);

    font-size: 7px;

    font-weight: 800;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;

}


.badge-lab {

    background:
        #675bd9;

}


.badge-vet {

    background:
        #2aa971;

}


.badge-offer {

    background:
        #ed6677;

}


.badge-premium {

    background:

        linear-gradient(
            135deg,
            #2d3550,
            #087fd1
        );

}


.product-image-overlay {

    position: absolute;

    z-index: 8;

    right: 15px;
    bottom: 15px;
    left: 15px;

    padding:
        12px 14px;

    display: flex;

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

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

    border-radius: 12px;

    color:
        var(--dark);

    background:
        rgba(255,255,255,.82);

    backdrop-filter:
        blur(15px);

    opacity: 0;

    transform:
        translateY(15px);

    transition:
        .35s ease;

    font-size: 8px;

    font-weight: 800;

}


.product-card:hover
.product-image-overlay {

    opacity: 1;

    transform:
        translateY(0);

}


.product-image-overlay b {

    color:
        var(--blue);

    font-size: 15px;

}


.product-info {

    padding: 24px;

}


.product-topline {

    display: flex;

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

    gap: 10px;

}


.product-category {

    color:
        var(--blue);

    font-size: 7px;

    font-weight: 800;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

}


.product-status {

    position: relative;

    padding-left: 12px;

    color:
        #619276;

    font-size: 7px;

    font-weight: 700;

}


.product-status::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--green);

    transform:
        translateY(-50%);

}


.product-info h3 {

    min-height: 47px;

    margin-top: 12px;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 16px;

    line-height: 1.3;

}


.product-short-description {

    min-height: 54px;

    margin-top: 9px;

    color:
        var(--muted);

    font-size: 9px;

    line-height: 1.7;

}


.product-features {

    margin-top: 16px;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}


.product-features span {

    padding:
        6px 8px;

    border-radius: 8px;

    color:
        #52767b;

    background:
        #f0f8f8;

    font-size: 7px;

    font-weight: 700;

}


.product-price {

    min-height: 78px;

    margin-top: 20px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(0,70,80,.07);

}


.product-price > span {

    display: block;

    margin-bottom: 4px;

    color:
        #9aa8aa;

    font-size: 8px;

    text-decoration:
        line-through;

}


.product-price strong {

    display: block;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 21px;

    letter-spacing:
        -.8px;

}


.product-price small {

    display: block;

    margin-top: 5px;

    color:
        var(--blue);

    font-size: 7px;

    font-weight: 700;

}


.product-actions {

    margin-top: 18px;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 8px;

}


.product-detail-button {

    min-height: 43px;

    padding:
        0 12px;

    display: flex;

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

    border:
        1px solid
        rgba(8,127,209,.12);

    border-radius: 11px;

    color:
        var(--blue);

    background:
        #f4fbfb;

    font-size: 8px;

    font-weight: 800;

    transition:
        .3s ease;

}


.product-detail-button:hover {

    color: white;

    border-color:
        transparent;

    background:
        var(--blue);

}


.product-detail-button span {

    font-size: 14px;

}


.product-whatsapp-button {

    min-height: 43px;

    padding:
        0 12px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: white;

    background:

        linear-gradient(
            135deg,
            #10b96f,
            #20d892
        );

    font-size: 7px;

    font-weight: 800;

    transition:
        .3s ease;

}


.product-whatsapp-button:hover {

    box-shadow:

        0 12px 25px
        rgba(22,185,111,.24);

    transform:
        translateY(-2px);

}


.no-products {

    display: none;

    margin-top: 30px;

    padding:
        45px;

    border:
        1px dashed
        rgba(0,70,80,.13);

    border-radius: 22px;

    text-align: center;

    background:
        white;

}


.no-products.visible {

    display: block;

}


.no-products strong {

    display: block;

    color:
        var(--dark);

    font-size: 14px;

}


.no-products span {

    display: block;

    margin-top: 7px;

    color:
        var(--muted);

    font-size: 9px;

}


/* =========================================================
   BRANDS
========================================================= */

.brands-section {

    background:
        white;

}


.brands-grid {

    display: grid;

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

    gap: 18px;

}


.brand-card {

    min-height: 290px;

    padding: 30px;

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

    border-radius: 24px;

    background:
        #fbfefe;

    transition:
        .4s ease;

}


.brand-card:hover {

    border-color:
        rgba(8,127,209,.18);

    box-shadow:
        var(--shadow);

    transform:
        translateY(-8px);

}


.brand-letter {

    width: 58px;
    height: 58px;

    margin-bottom: 32px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    color: white;

    background:

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

    font-family:
        "Manrope",
        sans-serif;

    font-size: 22px;

    font-weight: 800;

    transition:
        .35s ease;

}


.brand-card:hover
.brand-letter {

    transform:
        rotate(-7deg)
        scale(1.08);

}


.brand-card > span {

    color:
        var(--blue);

    font-size: 7px;

    font-weight: 800;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


.brand-card strong {

    display: block;

    margin-top: 8px;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 21px;

}


.brand-card p {

    margin-top: 11px;

    color:
        var(--muted);

    font-size: 9px;

    line-height: 1.75;

}


/* =========================================================
   BENEFITS
========================================================= */

.benefits-section {

    overflow: hidden;

    background:
        #f5fbfb;

}


.benefits-layout {

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    align-items: center;

    gap: 100px;

}


.benefits-visual {

    position: relative;

    min-height: 560px;

    display: grid;

    place-items: center;

}


.benefits-orbit {

    position: absolute;

    width: 430px;
    height: 430px;

    border:
        1px solid
        rgba(8,127,209,.13);

    border-radius: 50%;

    animation:
        orbitRotate
        18s linear infinite;

}


.benefits-orbit::before {

    content: "";

    position: absolute;

    inset: 43px;

    border:
        1px dashed
        rgba(16,201,189,.24);

    border-radius: 50%;

}


.benefits-core {

    position: relative;

    z-index: 4;

    width: 255px;
    height: 255px;

    display: grid;

    place-content: center;

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

    border-radius: 50%;

    text-align: center;

    background:
        rgba(255,255,255,.67);

    box-shadow:

        0 30px 70px
        rgba(0,60,70,.12);

    backdrop-filter:
        blur(18px);

    animation:
        coreFloat
        5s ease-in-out infinite;

}


@keyframes coreFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-14px);

    }

}


.benefits-core span {

    color:
        #799095;

    font-size: 8px;

    font-weight: 700;

    letter-spacing:
        2px;

}


.benefits-core strong {

    display: block;

    margin-top: 4px;

    color:
        var(--blue);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 44px;

    letter-spacing:
        -2px;

}


.benefits-core small {

    margin-top: 5px;

    color:
        var(--muted);

    font-size: 7px;

}


.benefit-float {

    position: absolute;

    z-index: 8;

    min-width: 150px;

    padding:
        14px 16px;

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

    border-radius: 15px;

    background:
        rgba(255,255,255,.76);

    box-shadow:

        0 18px 42px
        rgba(0,60,70,.11);

    backdrop-filter:
        blur(15px);

}


.benefit-float-one {

    top: 85px;
    left: 5px;

    animation:
        floatingSmall
        5s ease-in-out infinite;

}


.benefit-float-two {

    right: 5px;
    bottom: 90px;

    animation:
        floatingSmall
        6s 1s ease-in-out infinite;

}


.benefit-float strong {

    display: block;

    color:
        var(--dark);

    font-size: 9px;

}


.benefit-float span {

    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 7px;

}


.section-description {

    max-width: 680px;

    margin-top: 20px;

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.8;

}


.benefits-list {

    margin-top: 35px;

    display: grid;

    gap: 13px;

}


.benefit-item {

    padding: 17px;

    display: flex;

    align-items: center;

    gap: 15px;

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

    border-radius: 16px;

    background:
        white;

    transition:
        .3s ease;

}


.benefit-item:hover {

    border-color:
        rgba(8,127,209,.18);

    box-shadow:

        0 13px 30px
        rgba(0,55,65,.055);

    transform:
        translateX(5px);

}


.benefit-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color: white;

    background:

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

    font-family:
        "Manrope",
        sans-serif;

    font-size: 9px;

    font-weight: 800;

}


.benefit-item h3 {

    color:
        var(--dark);

    font-size: 11px;

}


.benefit-item p {

    margin-top: 4px;

    color:
        var(--muted);

    font-size: 8px;

    line-height: 1.6;

}


/* =========================================================
   REVIEWS
========================================================= */

.reviews-section {

    background:
        white;

}


.reviews-grid {

    display: grid;

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

    gap: 20px;

}


.review-card {

    min-height: 320px;

    padding: 32px;

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

    border-radius: 25px;

    background:
        #fbfefe;

    transition:
        .4s ease;

}


.review-card:hover {

    border-color:
        rgba(8,127,209,.18);

    box-shadow:
        var(--shadow);

    transform:
        translateY(-8px);

}


.featured-review {

    color: white;

    border-color:
        transparent;

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(16,201,189,.2),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #032029,
            #07505c
        );

}


.review-google {

    width: 51px;
    height: 51px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    color: white;

    background:

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

    font-family:
        "Manrope",
        sans-serif;

    font-size: 19px;

    font-weight: 800;

}


.featured-review
.review-google {

    color:
        var(--dark);

    background:
        var(--cyan-light);

}


.review-stars {

    margin-top: 27px;

    color:
        #f4b436;

    font-size: 13px;

    letter-spacing:
        2px;

}


.review-card h3 {

    margin-top: 17px;

    color:
        var(--dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 18px;

}


.featured-review h3 {

    color: white;

}


.review-card p {

    margin-top: 10px;

    color:
        var(--muted);

    font-size: 10px;

    line-height: 1.75;

}


.featured-review p {

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

}


.review-link {

    display: block;

    margin-top: 25px;

    color:
        var(--blue);

    font-size: 9px;

    font-weight: 800;

}


.featured-review
.review-link {

    color:
        var(--cyan-light);

}


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

.contact-section {

    padding:
        110px 0;

    background:
        #f5fbfb;

}


.contact-card {

    position: relative;

    min-height: 600px;

    padding: 65px;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 80px;

    border-radius: 37px;

    color: white;

    background:

        radial-gradient(
            circle at 87% 15%,
            rgba(16,201,189,.22),
            transparent 30%
        ),

        linear-gradient(
            130deg,
            #031d25,
            #07505c
        );

    box-shadow:

        0 35px 85px
        rgba(0,55,65,.18);

}


.contact-glow {

    position: absolute;

    top: -240px;
    right: -140px;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    background:
        var(--cyan);

    filter:
        blur(140px);

    opacity: .11;

}


.contact-content {

    position: relative;

    z-index: 3;

}


.light-label {

    color:
        var(--cyan-light);

}


.contact-content h2 {

    margin: 0;

    max-width: 600px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:

        clamp(
            38px,
            4.2vw,
            56px
        );

    line-height: 1.05;

    letter-spacing:
        -3px;

}


.contact-content > p {

    max-width: 570px;

    margin-top: 18px;

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

    font-size: 11px;

    line-height: 1.8;

}


.contact-details {

    margin-top: 33px;

    display: grid;

    gap: 12px;

}


.contact-detail {

    padding-bottom: 12px;

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

}


.contact-detail span {

    display: block;

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

    font-size: 7px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.contact-detail strong {

    display: block;

    margin-top: 4px;

    color:
        white;

    font-size: 10px;

}


.contact-form {

    position: relative;

    z-index: 3;

    padding: 28px;

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

    border-radius: 25px;

    background:
        rgba(255,255,255,.065);

    backdrop-filter:
        blur(15px);

}


.form-grid {

    display: grid;

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

    gap: 12px;

}


.contact-form label {

    display: block;

    margin-bottom: 13px;

}


.contact-form label > span {

    display: block;

    margin-bottom: 7px;

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

    font-size: 8px;

    font-weight: 700;

}


.contact-form input,
.contact-form select,
.contact-form textarea {

    width: 100%;

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

    outline: 0;

    border-radius: 12px;

    color:
        white;

    background:
        rgba(255,255,255,.07);

    transition:
        .3s ease;

}


.contact-form input,
.contact-form select {

    height: 46px;

    padding:
        0 13px;

}


.contact-form textarea {

    padding: 13px;

    resize: vertical;

}


.contact-form input::placeholder,
.contact-form textarea::placeholder {

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

}


.contact-form select option {

    color:
        var(--dark);

    background:
        white;

}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {

    border-color:
        rgba(160,255,244,.35);

    background:
        rgba(255,255,255,.10);

}


.button-contact {

    width: 100%;

    margin-top: 4px;

    color:
        var(--dark);

    background:
        var(--cyan-light);

    cursor: pointer;

}


.button-contact:hover {

    transform:
        translateY(-3px);

    box-shadow:

        0 16px 35px
        rgba(16,201,189,.2);

}


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

.footer {

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

    background:
        #021217;

}


.footer-main {

    padding:
        75px 0 55px;

    display: grid;

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

    gap: 60px;

}


.footer-logo
.logo-main {

    color: white;

}


.footer-about p {

    max-width: 330px;

    margin-top: 22px;

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

    font-size: 9px;

    line-height: 1.8;

}


.footer-social {

    margin-top: 22px;

    display: flex;

    gap: 8px;

}


.footer-social a {

    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

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

    border-radius: 12px;

    color:
        var(--cyan-light);

    background:
        rgba(255,255,255,.035);

    font-size: 8px;

    font-weight: 800;

    transition:
        .3s ease;

}


.footer-social a:hover {

    color:
        var(--dark);

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

    background:
        var(--cyan-light);

    transform:
        translateY(-3px);

}


.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;

}


.footer-column h3 {

    margin-bottom: 8px;

    color:
        white;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 12px;

}


.footer-column a,
.footer-column span {

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

    font-size: 8px;

    line-height: 1.7;

    transition:
        .3s ease;

}


.footer-column a:hover {

    color:
        var(--cyan-light);

    transform:
        translateX(4px);

}


.footer-bottom {

    min-height: 70px;

    display: flex;

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

    gap: 30px;

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

}


.footer-bottom p,
.footer-bottom span {

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

    font-size: 7px;

}


/* =========================================================
   SEARCH MODAL
========================================================= */

.search-modal {

    position: fixed;

    z-index: 5000;

    inset: 0;

    padding: 30px;

    display: grid;

    place-items: center;

    background:
        rgba(2,18,23,.88);

    backdrop-filter:
        blur(22px);

    opacity: 0;

    visibility: hidden;

    transition:
        .35s ease;

}


.search-modal.open {

    opacity: 1;

    visibility: visible;

}


.search-close {

    position: absolute;

    top: 30px;
    right: 35px;

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

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

    border-radius: 14px;

    color: white;

    background:
        rgba(255,255,255,.05);

    cursor: pointer;

    font-size: 26px;

    transition:
        .3s ease;

}


.search-close:hover {

    color:
        var(--dark);

    background:
        var(--cyan-light);

    transform:
        rotate(8deg);

}


.search-modal-content {

    width:
        min(
            750px,
            100%
        );

    color: white;

    text-align: center;

}


.search-modal-content > span {

    color:
        var(--cyan-light);

    font-size: 8px;

    font-weight: 800;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;

}


.search-modal-content h2 {

    margin-top: 12px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:

        clamp(
            34px,
            5vw,
            55px
        );

    line-height: 1.05;

    letter-spacing:
        -2.5px;

}


.global-search-box {

    height: 62px;

    margin-top: 30px;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    gap: 13px;

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

    border-radius: 18px;

    background:
        rgba(255,255,255,.065);

}


.global-search-box svg {

    width: 21px;
    height: 21px;

    color:
        var(--cyan-light);

}


.global-search-box input {

    width: 100%;

    border: 0;

    outline: 0;

    color: white;

    background:
        transparent;

    font-size: 12px;

}


.global-search-box input::placeholder {

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

}


.global-search-results {

    max-height: 310px;

    margin-top: 12px;

    overflow-y: auto;

    display: grid;

    gap: 7px;

    text-align: left;

}


.search-result {

    padding: 13px 15px;

    display: flex;

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

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

    border-radius: 13px;

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

    background:
        rgba(255,255,255,.045);

    font-size: 9px;

    transition:
        .3s ease;

}


.search-result:hover {

    color: white;

    border-color:
        rgba(160,255,244,.25);

    background:
        rgba(255,255,255,.08);

    transform:
        translateX(5px);

}


.search-result span:last-child {

    color:
        var(--cyan-light);

}


/* =========================================================
   WHATSAPP FLUTUANTE
========================================================= */

.floating-whatsapp {

    position: fixed;

    z-index: 1500;

    right: 25px;
    bottom: 25px;

    height: 60px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 19px;

    color: white;

    background:

        linear-gradient(
            135deg,
            #10b96f,
            #23d995
        );

    box-shadow:

        0 17px 40px
        rgba(22,185,111,.28);

    transition:
        .3s ease;

}


.floating-whatsapp:hover {

    transform:
        translateY(-5px);

    box-shadow:

        0 22px 48px
        rgba(22,185,111,.38);

}


.floating-whatsapp svg {

    position: relative;

    z-index: 2;

    width: 27px;
    height: 27px;

    fill:
        currentColor;

    stroke: none;

}


.floating-whatsapp-label {

    position: relative;

    z-index: 2;

    font-size: 9px;

    font-weight: 800;

}


.whatsapp-pulse {

    position: absolute;

    top: 50%;
    left: 29px;

    width: 35px;
    height: 35px;

    border:
        2px solid
        rgba(255,255,255,.5);

    border-radius: 50%;

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

    animation:
        whatsappPulse
        1.8s ease-out infinite;

}


@keyframes whatsappPulse {

    0% {

        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(.7);

    }

    100% {

        opacity: 0;

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

    }

}


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

.reveal {

    opacity: 0;

    transform:
        translateY(42px);

    transition:

        opacity .9s ease,
        transform .9s ease;

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


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

@media(max-width:1180px) {

    .navigation {

        gap: 0;

    }


    .nav-link {

        padding:
            10px 8px;

        font-size: 9px;

    }


    .header-whatsapp span {

        display: none;

    }


    .header-whatsapp {

        width: 43px;

        padding: 0;

        justify-content: center;

    }


    .products-grid {

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

    }


    .categories-grid {

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

    }


    .brands-grid {

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

    }

}


@media(max-width:1000px) {

    .navigation {

        position: fixed;

        top: 72px;
        right: 20px;
        left: 20px;

        padding: 16px;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

        border:
            1px solid
            rgba(0,70,80,.08);

        border-radius: 20px;

        background:
            rgba(255,255,255,.96);

        box-shadow:

            0 25px 55px
            rgba(0,55,65,.12);

        backdrop-filter:
            blur(20px);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-15px);

        transition:
            .3s ease;

    }


    .navigation.open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }


    .nav-link {

        padding:
            13px 14px;

        font-size: 10px;

    }


    .nav-link::after {

        display: none;

    }


    .mobile-menu-button {

        display: grid;

    }


    .hero-container {

        grid-template-columns:
            1fr;

    }


    .hero-content {

        max-width: 850px;

    }


    .hero-visual {

        min-height: 600px;

    }


    .section-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

    }


    .centered-heading {

        align-items: center;

    }


    .product-toolbar {

        align-items: flex-start;

        flex-direction: column;

    }


    .product-search {

        width: 100%;

    }


    .products-grid {

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

    }


    .benefits-layout {

        grid-template-columns:
            1fr;

    }


    .benefits-visual {

        min-height: 500px;

    }


    .reviews-grid {

        grid-template-columns:
            1fr;

    }


    .contact-card {

        grid-template-columns:
            1fr;

    }


    .footer-main {

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

    }

}


@media(max-width:750px) {

    .container {

        width:
            calc(100% - 28px);

    }


    .header-content {

        min-height: 72px;

    }


    .logo-symbol {

        width: 43px;
        height: 43px;

    }


    .logo-main {

        font-size: 17px;

    }


    .logo-text small {

        display: none;

    }


    .search-trigger {

        display: none;

    }


    .hero {

        min-height: auto;

        padding:
            120px 0 85px;

    }


    .hero h1 {

        font-size: 47px;

        letter-spacing:
            -2.8px;

    }


    .hero-actions {

        flex-direction: column;

    }


    .hero-actions
    .button {

        width: 100%;

    }


    .hero-stats {

        grid-template-columns:
            1fr;

        gap: 14px;

    }


    .hero-stat {

        padding: 0;

    }


    .hero-stat +
    .hero-stat {

        padding:
            14px 0 0;

        border-left: 0;

        border-top:
            1px solid
            rgba(0,70,80,.09);

    }


    .hero-stat span {

        max-width: none;

    }


    .hero-visual {

        min-height: 530px;

    }


    .orbit-large {

        width: 430px;
        height: 430px;

    }


    .orbit-medium {

        width: 340px;
        height: 340px;

    }


    .orbit-small {

        width: 245px;
        height: 245px;

    }


    .hero-equipment {

        transform:
            scale(.84)
            rotateY(-10deg);

    }


    .floating-card-one {

        top: 50px;

    }


    .floating-card-two {

        bottom: 60px;

    }


    .scroll-indicator {

        display: none;

    }


    .section {

        padding:
            95px 0;

    }


    .section-heading {

        margin-bottom: 42px;

    }


    .section-heading h2,
    .benefits-content h2 {

        font-size: 40px;

        letter-spacing:
            -2px;

    }


    .promotion-section {

        padding-bottom: 95px;

    }


    .promotion-card {

        padding:
            45px 30px;

        grid-template-columns:
            1fr;

    }


    .promotion-visual {

        display: none;

    }


    .categories-grid {

        grid-template-columns:
            1fr;

    }


    .products-grid {

        grid-template-columns:
            1fr;

    }


    .brands-grid {

        grid-template-columns:
            1fr;

    }


    .benefits-orbit {

        width: 360px;
        height: 360px;

    }


    .contact-card {

        padding:
            45px 28px;

    }


    .form-grid {

        grid-template-columns:
            1fr;

    }


    .footer-main {

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .footer-bottom {

        padding:
            22px 0;

        flex-direction: column;

        align-items: flex-start;

    }

}


@media(max-width:520px) {

    .header-whatsapp {

        display: none;

    }


    .hero h1 {

        font-size: 40px;

        letter-spacing:
            -2px;

    }


    .hero-content > p {

        font-size: 13px;

    }


    .hero-visual {

        min-height: 470px;

    }


    .orbit-large {

        width: 330px;
        height: 330px;

    }


    .orbit-medium {

        width: 270px;
        height: 270px;

    }


    .orbit-small {

        width: 195px;
        height: 195px;

    }


    .hero-machine-glow {

        width: 340px;
        height: 340px;

    }


    .hero-equipment {

        transform:
            scale(.66)
            rotateY(-10deg);

    }


    .hero-floating-card {

        min-width: 135px;

        padding: 10px;

    }


    .floating-card-icon {

        width: 35px;
        height: 35px;

    }


    .floating-card-one {

        top: 35px;
        left: 0;

    }


    .floating-card-two {

        right: 0;
        bottom: 45px;

    }


    .section-heading h2,
    .benefits-content h2 {

        font-size: 35px;

    }


    .product-info {

        padding: 21px;

    }


    .product-image {

        height: 250px;

    }


    .benefits-visual {

        min-height: 420px;

    }


    .benefits-orbit {

        width: 300px;
        height: 300px;

    }


    .benefits-core {

        width: 215px;
        height: 215px;

    }


    .benefit-float {

        min-width: 125px;

        padding: 11px;

    }


    .contact-content h2 {

        font-size: 36px;

        letter-spacing:
            -2px;

    }


    .contact-form {

        padding: 20px;

    }


    .floating-whatsapp {

        right: 16px;
        bottom: 16px;

        width: 58px;

        padding: 0;

        justify-content: center;

    }


    .floating-whatsapp-label {

        display: none;

    }


    .whatsapp-pulse {

        left: 50%;

    }


    .search-modal {

        padding: 18px;

    }


    .search-close {

        top: 17px;
        right: 17px;

    }

}


/* =========================================================
   ACESSIBILIDADE / REDUÇÃO DE MOVIMENTO
========================================================= */

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

    * {

        scroll-behavior: auto !important;

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;

    }

}
/* =========================================================
   ODONTOTECH
   EQUIPAMENTO ODONTOLÓGICO 3D PREMIUM
========================================================= */

.dental-equipment-stage {

    position: relative;

    width: 520px;
    height: 590px;

    display: grid;

    place-items: center;

    perspective: 1700px;

    transform-style: preserve-3d;

}


.dental-equipment-360 {

    position: relative;

    width: 470px;
    height: 540px;

    transform-style: preserve-3d;

    animation:
        premiumDentalRotate
        16s linear infinite;

}


@keyframes premiumDentalRotate {

    from {

        transform:
            rotateX(-5deg)
            rotateY(0deg);

    }

    to {

        transform:
            rotateX(-5deg)
            rotateY(360deg);

    }

}


/* =========================================================
   CONJUNTO PRINCIPAL
========================================================= */

.dental-machine-premium {

    position: absolute;

    inset: 0;

    transform-style:
        preserve-3d;

}
.machine-chassis {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 320px;
    height: 420px;

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

    transform-style:
        preserve-3d;

    --machine-width: 320px;
    --machine-height: 420px;
    --machine-depth: 110px;
    --machine-half-depth: 55px;
}

/* =========================================================
   TOPO E FUNDO 3D — FECHAMENTO GEOMÉTRICO
========================================================= */
.machine-top-3d {
    position: absolute;
    top: 50%;
    left: 0;
    width: 320px;
    height: 110px;
    margin-top: -55px;
    transform-origin: center center;
    transform:
        translateY(-210px)
        rotateX(90deg);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eef5f6 28%,
            #d1dee1 66%,
            #9fb1b6 100%
        );
    box-shadow:
        inset 0 10px 18px rgba(255,255,255,.70),
        inset 0 -9px 16px rgba(58,87,94,.11);
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    pointer-events: none;
}
.machine-bottom-3d {
    position: absolute;
    top: 50%;
    left: 0;
    width: 320px;
    height: 110px;
    margin-top: -55px;
    transform-origin: center center;
    transform:
        translateY(210px)
        rotateX(-90deg);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            180deg,
            #91a5aa 0%,
            #b4c5c9 45%,
            #d7e2e4 100%
        );
    box-shadow:
        inset 0 8px 14px rgba(255,255,255,.22),
        inset 0 -10px 18px rgba(44,70,77,.15);
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    pointer-events: none;
}



/* =========================================================
   FRENTE
========================================================= */
.machine-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 420px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5fafb 34%,
            #d9e5e8 67%,
            #a7b8bd 100%
        );
    box-shadow:
        -32px 45px 70px rgba(0,55,65,.23),
        inset 15px 13px 24px rgba(255,255,255,.96),
        inset -18px -20px 34px rgba(49,83,91,.10);
    transform: translateZ(55px);
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}


.machine-front::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(

            120deg,

            rgba(255,255,255,.75),

            transparent 28%,

            transparent 72%,

            rgba(8,127,209,.04)

        );

}


/* =========================================================
   TAMPA SUPERIOR
========================================================= */

.machine-top-shell {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 52px;

    border-radius:
        46px 46px 14px 14px;

    background:

        linear-gradient(

            180deg,

            #fbffff,

            #d8e3e5

        );

    border-bottom:

        1px solid
        rgba(0,70,80,.08);

    box-shadow:

        inset 0 4px 6px
        rgba(255,255,255,.95);

}


.top-vent {

    position: absolute;

    top: 17px;
    left: 28px;

    display: flex;

    gap: 5px;

}


.top-vent span {

    display: block;

    width: 17px;
    height: 3px;

    border-radius: 4px;

    background:
        #91a4a9;

    opacity:
        .45;

}


.top-status {

    position: absolute;

    top: 15px;
    right: 25px;

    display: flex;

    align-items: center;

    gap: 6px;

    color:
        #5b747a;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .9px;

}


.top-status span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:

        0 0 10px
        var(--green);

    animation:
        premiumStatusPulse
        1.5s infinite;

}


@keyframes premiumStatusPulse {

    50% {

        transform:
            scale(1.55);

        opacity:
            .45;

    }

}


/* =========================================================
   DISPLAY
========================================================= */

.machine-display-frame {

    position: absolute;

    top: 68px;
    left: 32px;

    width: 256px;
    height: 168px;

    padding: 8px;

    border-radius:
        25px;

    background:

        linear-gradient(

            145deg,

            #c7d5d8,

            #f8ffff 48%,

            #93a6ab

        );

    box-shadow:

        inset 3px 3px 6px
        rgba(255,255,255,.9),

        0 16px 26px
        rgba(0,55,65,.11);

}


.machine-display {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius:
        18px;

    background:

        radial-gradient(

            circle at 50% 48%,

            #075e6c,

            #043743 43%,

            #021920 76%

        );

    box-shadow:

        inset 0 0 28px
        rgba(0,0,0,.55);

}


.display-top {

    position: absolute;

    z-index: 5;

    top: 11px;
    left: 13px;

    display: flex;

    align-items: center;

    gap: 6px;

    color:
        #b7fff6;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.display-online {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:

        0 0 10px
        var(--cyan);

}


/* =========================================================
   HOLOGRAMA DO DENTE
========================================================= */

.display-center {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 120px;
    height: 110px;

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

}


.tooth-hologram {

    position: absolute;

    top: 27px;
    left: 43px;

    width: 42px;
    height: 55px;

    filter:

        drop-shadow(
            0 0 10px
            rgba(16,201,189,.65)
        );

}


.tooth-main {

    position: absolute;

    top: 0;
    left: 3px;

    width: 35px;
    height: 40px;

    border:

        2px solid
        #bafff7;

    border-radius:

        18px 18px
        13px 13px;

    transform:
        rotate(2deg);

}


.tooth-main::before {

    content: "";

    position: absolute;

    top: 10px;
    left: 7px;

    width: 17px;
    height: 12px;

    border-top:

        1px solid
        rgba(186,255,247,.55);

    border-radius:
        50%;

}


.tooth-root {

    position: absolute;

    top: 35px;

    width: 14px;
    height: 25px;

    border-bottom:

        2px solid
        #bafff7;

}


.root-one {

    left: 4px;

    border-left:

        2px solid
        #bafff7;

    transform:
        rotate(8deg);

}


.root-two {

    right: 4px;

    border-right:

        2px solid
        #bafff7;

    transform:
        rotate(-8deg);

}


/* =========================================================
   ANÉIS HOLOGRÁFICOS
========================================================= */

.holo-ring {

    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

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

    border:

        1px solid
        rgba(181,255,247,.28);

}


.holo-ring-one {

    width: 72px;
    height: 72px;

    animation:
        holoPulse
        2.3s infinite;

}


.holo-ring-two {

    width: 94px;
    height: 94px;

    animation:
        holoPulse
        2.3s .7s infinite;

}


.holo-ring-three {

    width: 114px;
    height: 114px;

    animation:
        holoPulse
        2.3s 1.4s infinite;

}


@keyframes holoPulse {

    0% {

        opacity:
            0;

        scale:
            .7;

    }

    50% {

        opacity:
            .8;

    }

    100% {

        opacity:
            0;

        scale:
            1.08;

    }

}


.holo-axis {

    position: absolute;

    top: 50%;
    left: 50%;

    background:

        rgba(186,255,247,.13);

}


.axis-horizontal {

    width: 115px;
    height: 1px;

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

}


.axis-vertical {

    width: 1px;
    height: 105px;

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

}


/* =========================================================
   DADOS DA TELA
========================================================= */

.display-data {

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 11px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

}


.data-column small {

    display: block;

    color:
        rgba(186,255,247,.6);

    font-size:
        5px;

    letter-spacing:
        1px;

}


.data-column strong {

    color:
        #bafff7;

    font-size:
        12px;

}


.data-bars {

    display: flex;

    align-items: end;

    gap: 4px;

    height: 28px;

}


.data-bars span {

    width: 3px;

    border-radius:
        4px 4px 0 0;

    background:

        linear-gradient(

            var(--cyan-light),

            var(--cyan),

            var(--blue)

        );

    box-shadow:

        0 0 6px
        var(--cyan);

    animation:
        displayBars
        1.1s ease-in-out infinite alternate;

}


.data-bars span:nth-child(1) {

    height: 8px;

}


.data-bars span:nth-child(2) {

    height: 18px;

}


.data-bars span:nth-child(3) {

    height: 25px;

}


.data-bars span:nth-child(4) {

    height: 14px;

}


.data-bars span:nth-child(5) {

    height: 22px;

}


@keyframes displayBars {

    to {

        transform:
            scaleY(.55);

        opacity:
            .5;

    }

}


.display-scan-beam {

    position: absolute;

    z-index: 4;

    top: 30px;
    left: 10px;
    right: 10px;

    height: 2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            #bcfff8,

            var(--cyan),

            #bcfff8,

            transparent

        );

    box-shadow:

        0 0 15px
        var(--cyan);

    animation:
        displayScanBeam
        2.9s ease-in-out infinite;

}


@keyframes displayScanBeam {

    0%,
    100% {

        top: 30px;

        opacity:
            .2;

    }

    50% {

        top: 127px;

        opacity:
            1;

    }

}


/* =========================================================
   MARCA ODONTOTECH
========================================================= */

.machine-brand {

    position: absolute;

    top: 253px;
    left: 34px;

    display: flex;

    align-items: center;

    gap: 11px;

}


.machine-brand-logo {

    width: 44px;
    height: 44px;

    overflow: hidden;

    border-radius:
        14px;

    background:
        white;

    box-shadow:

        0 10px 22px
        rgba(8,127,209,.16);

}


.machine-brand-logo img {

    width: 100%;
    height: 100%;

    object-fit:
        cover;

    transform:
        scale(1.08);

}


.machine-brand strong {

    color:
        #092d38;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        16px;

    font-weight:
        800;

}


.machine-brand strong span {

    color:
        var(--blue);

}


.machine-brand small {

    display: block;

    margin-top:
        3px;

    color:
        #7b9196;

    font-size:
        5px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


/* =========================================================
   CONTROLES
========================================================= */

.machine-control-section {

    position: absolute;

    top: 310px;
    left: 35px;
    right: 35px;

    display: flex;

    align-items: center;

    gap: 14px;

}


.control-dial {

    position: relative;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            #eaf2f3 25%,

            #a3b3b7 60%,

            #697b80

        );

    box-shadow:

        inset 3px 3px 5px
        rgba(255,255,255,.8),

        0 5px 8px
        rgba(0,55,65,.12);

}


.control-dial span {

    position: absolute;

    top: 5px;
    left: 50%;

    width: 2px;
    height: 9px;

    background:
        #475c62;

    transform:
        translateX(-50%);

}


.control-buttons {

    display: flex;

    gap: 7px;

}


.control-buttons button {

    width: 13px;
    height: 13px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:

        linear-gradient(

            #f8ffff,

            #9caeb3

        );

    box-shadow:

        inset 2px 2px 3px
        rgba(255,255,255,.9),

        0 3px 4px
        rgba(0,55,65,.12);

}


.control-led {

    margin-left: auto;

    width: 32px;
    height: 5px;

    border-radius:
        999px;

    background:
        var(--cyan);

    box-shadow:

        0 0 11px
        var(--cyan),

        0 0 22px
        rgba(16,201,189,.65);

    animation:
        controlLedPulse
        2s infinite;

}


@keyframes controlLedPulse {

    50% {

        opacity:
            .35;

    }

}


/* =========================================================
   PAINEL INFERIOR
========================================================= */

.machine-lower-panel {

    position: absolute;

    left: 34px;
    right: 34px;
    bottom: 24px;

    height: 45px;

    border-top:

        1px solid
        rgba(0,70,80,.08);

}


.lower-slot {

    position: absolute;

    top: 15px;
    left: 0;

    width: 105px;
    height: 9px;

    border-radius:
        999px;

    background:

        linear-gradient(

            #7a8d92,

            #c9d5d8

        );

    box-shadow:

        inset 0 2px 4px
        rgba(0,0,0,.18);

}


.lower-indicators {

    position: absolute;

    top: 15px;
    right: 0;

    display: flex;

    gap: 6px;

}


.lower-indicators span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    opacity:
        .7;

}


/* =========================================================
   LATERAIS REAIS
========================================================= */
.machine-side-left {
    position: absolute;
    top: 0;
    left: 50%;
    width: 110px;
    height: 420px;
    margin-left: -55px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            90deg,
            #768b91 0%,
            #9fb2b7 25%,
            #ccdadd 65%,
            #eaf1f2 100%
        );
    box-shadow:
        inset 10px 0 16px rgba(255,255,255,.28),
        inset -8px 0 14px rgba(0,45,55,.10);
    transform-origin: center center;
    transform:
        rotateY(-90deg)
        translateZ(160px);
    transform-style: preserve-3d;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
.machine-side-right {
    position: absolute;
    top: 0;
    left: 50%;
    width: 110px;
    height: 420px;
    margin-left: -55px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            90deg,
            #eaf1f2 0%,
            #ccdadd 35%,
            #9fb2b7 72%,
            #768b91 100%
        );
    box-shadow:
        inset -10px 0 16px rgba(0,45,55,.10),
        inset 8px 0 14px rgba(255,255,255,.25);
    transform-origin: center center;
    transform:
        rotateY(90deg)
        translateZ(160px);
    transform-style: preserve-3d;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}


.side-groove {

    position: absolute;

    top: 45px;
    left: 18px;

    width: 8px;
    height: 240px;

    border-radius:
        10px;

    background:

        linear-gradient(

            #84969b,

            #dce6e8

        );

}


.side-vents {

    position: absolute;

    top: 80px;
    left: 38px;

    display: grid;

    gap: 10px;

}


.side-vents span {

    width: 26px;
    height: 4px;

    border-radius:
        999px;

    background:
        #687c81;

    opacity:
        .45;

}


/* =========================================================
   SCANNER + DOCK
========================================================= */

.scanner-dock {

    position: absolute;

    top: 128px;
    left: 15px;

    width: 58px;
    height: 165px;

    border-radius:
        26px;

    background:

        linear-gradient(

            90deg,

            #8b9ca1,

            #e8f0f1

        );

    box-shadow:

        inset 7px 0 9px
        rgba(255,255,255,.4);

}


.scanner-device {

    position: absolute;

    top: 15px;
    left: 15px;

    width: 30px;
    height: 135px;

    transform:
        translateZ(28px);

    transform-style:
        preserve-3d;

}


.scanner-tip {

    position: absolute;

    top: -18px;
    left: -6px;

    width: 42px;
    height: 38px;

    border-radius:
        15px 15px 8px 8px;

    background:

        linear-gradient(

            145deg,

            #f8ffff,

            #a9b9bd

        );

    box-shadow:

        inset 4px 4px 6px
        rgba(255,255,255,.8);

}


.scanner-lens {

    position: absolute;

    top: 8px;
    left: 8px;

    width: 26px;
    height: 13px;

    border-radius:
        4px;

    background:

        radial-gradient(

            circle,

            #0b6c78,

            #052f37 55%,

            #011317

        );

    box-shadow:

        inset 0 0 7px
        rgba(16,201,189,.7),

        0 0 8px
        rgba(16,201,189,.25);

}


.scanner-neck {

    position: absolute;

    top: 15px;
    left: 7px;

    width: 16px;
    height: 24px;

    background:

        linear-gradient(

            #dce7e9,

            #9aacb0

        );

}


.scanner-handle {

    position: absolute;

    top: 35px;
    left: 0;

    width: 30px;
    height: 100px;

    border-radius:
        16px;

    background:

        linear-gradient(

            90deg,

            #aebfc3,

            #ffffff 46%,

            #c1ced1,

            #8c9da2

        );

    box-shadow:

        inset 3px 2px 5px
        rgba(255,255,255,.9);

}


.scanner-brand {

    position: absolute;

    top: 37px;
    left: 8px;

    color:
        #3a555c;

    font-size:
        7px;

    font-weight:
        900;

}


.scanner-light {

    position: absolute;

    bottom: 12px;
    left: 11px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:

        0 0 10px
        var(--cyan);

}


.side-connectors {

    position: absolute;

    bottom: 40px;
    left: 25px;

    display: flex;

    gap: 9px;

}


.side-connectors span {

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background:
        #4f646a;

    box-shadow:

        inset 0 0 3px
        rgba(0,0,0,.4);

}


/* =========================================================
   TRASEIRA REAL
========================================================= */
.machine-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 420px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            145deg,
            #c9d6d9,
            #edf3f4 48%,
            #a3b3b7
        );
    transform:
        rotateY(180deg)
        translateZ(55px);
    transform-style: preserve-3d;
    box-shadow:
        inset -10px -10px 18px rgba(0,0,0,.05);
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}


.back-panel {

    position: absolute;

    inset:
        28px 24px;

    border:

        1px solid
        rgba(0,70,80,.07);

    border-radius:
        28px;

    background:

        linear-gradient(

            145deg,

            rgba(255,255,255,.26),

            rgba(116,145,151,.08)

        );

}


.back-brand {

    position: absolute;

    top: 35px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

}


.back-brand img {

    width: 48px;
    height: 48px;

    object-fit:
        cover;

    border-radius:
        14px;

    opacity:
        .75;

}


.back-brand strong {

    color:
        #5e747a;

    font-size:
        8px;

    letter-spacing:
        1.5px;

}


.back-vent-grid {

    position: absolute;

    top: 135px;
    left: 50%;

    width: 150px;

    display: grid;

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

    gap: 10px;

    transform:
        translateX(-50%);

}


.back-vent-grid span {

    width: 28px;
    height: 5px;

    border-radius:
        999px;

    background:
        #72868b;

    opacity:
        .45;

}


.back-connections {

    position: absolute;

    left: 50%;
    bottom: 48px;

    display: flex;

    gap: 13px;

    transform:
        translateX(-50%);

}


.back-connections div {

    width: 20px;
    height: 20px;

    border-radius:
        6px;

    background:

        linear-gradient(

            #788b90,

            #cbd5d7

        );

    box-shadow:

        inset 0 2px 4px
        rgba(0,0,0,.18);

}


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

.machine-bottom {

    position: absolute;

    left: 22px;
    right: 22px;
    bottom: -24px;

    height: 36px;

    border-radius:
        7px 7px 25px 25px;

    background:

        linear-gradient(

            #84989d,

            #d4e0e2

        );

    transform:
        translateZ(10px);

}


.machine-foot {

    position: absolute;

    bottom: -11px;

    width: 42px;
    height: 13px;

    border-radius:
        0 0 9px 9px;

    background:
        #3e5359;

}


.foot-left {

    left: 30px;

}


.foot-right {

    right: 30px;

}


.bottom-shadow-line {

    position: absolute;

    top: 6px;
    left: 35px;
    right: 35px;

    height: 2px;

    background:

        rgba(0,70,80,.13);

}


/* =========================================================
   SOMBRA NO CHÃO
========================================================= */

.machine-floor-shadow {

    position: absolute;

    left: 50%;
    bottom: 35px;

    width: 340px;
    height: 46px;

    border-radius: 50%;

    background:
        rgba(0,45,55,.17);

    filter:
        blur(20px);

    transform:

        translateX(-50%)
        rotateX(78deg);

}


/* =========================================================
   ANÉIS EXTERNOS
========================================================= */

.premium-orbit {

    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    pointer-events: none;

}


.orbit-a {

    width: 430px;
    height: 430px;

    border:

        1px solid
        rgba(16,201,189,.16);

    transform:

        translate(-50%,-50%)
        rotateX(72deg);

}


.orbit-b {

    width: 490px;
    height: 490px;

    border:

        1px dashed
        rgba(8,127,209,.12);

    transform:

        translate(-50%,-50%)
        rotateX(60deg)
        rotateZ(18deg);

}


.orbit-c {

    width: 370px;
    height: 370px;

    border:

        1px solid
        rgba(103,91,217,.10);

    transform:

        translate(-50%,-50%)
        rotateX(82deg);

}


/* =========================================================
   PARTÍCULAS
========================================================= */

.premium-particle {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--cyan-light);

    box-shadow:

        0 0 15px
        var(--cyan);

    animation:
        premiumParticle
        4s ease-in-out infinite;

}


.particle-a {

    top: 70px;
    left: 35px;

}


.particle-b {

    top: 110px;
    right: 45px;

    animation-delay:
        .8s;

}


.particle-c {

    bottom: 85px;
    left: 55px;

    animation-delay:
        1.6s;

}


.particle-d {

    right: 45px;
    bottom: 70px;

    animation-delay:
        2.4s;

}


@keyframes premiumParticle {

    50% {

        transform:

            translateY(-20px)
            scale(1.5);

        opacity:
            .4;

    }

}


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

@media (max-width: 750px) {

    .dental-equipment-stage {

        width: 360px;
        height: 480px;

    }


    .dental-equipment-360 {

        scale:
            .76;

    }

}


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

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

    .dental-equipment-360 {

        animation:
            none;

        transform:
            rotateY(-22deg);

    }

}


/* =========================================================
   CAIXA 3D RETANGULAR — SEM PONTAS ARREDONDADAS
========================================================= */

.machine-front,
.machine-back,
.machine-side-left,
.machine-side-right,
.machine-top-3d,
.machine-bottom-3d {
    border-radius: 0 !important;
}

/* micro sobreposição para esconder linhas entre as faces */
.machine-front {
    width: 321px;
    height: 421px;
    left: -0.5px;
    top: -0.5px;
    transform: translateZ(55.5px);
}

.machine-back {
    width: 321px;
    height: 421px;
    left: -0.5px;
    top: -0.5px;
    transform:
        rotateY(180deg)
        translateZ(55.5px);
}

.machine-side-left,
.machine-side-right {
    width: 111px;
    height: 421px;
    margin-left: -55.5px;
    top: -0.5px;
}

.machine-top-3d,
.machine-bottom-3d {
    width: 321px;
    height: 111px;
    left: -0.5px;
    margin-top: -55.5px;
}