:root {

    --aqua: #b2f9ff;
    --yellow: #fffa8d;
    --pink: #ffb1c5;
    --gray: #bab7b7;
    --graphite: #4d4d4d;

    --white: #ffffff;
    --off-white: #fafafa;
    --soft-gray: #f2f2f2;

    --dark: #303030;

    --radius: 24px;

    --shadow:
        0 25px 70px rgba(77, 77, 77, 0.12);

    --transition:
        0.45s cubic-bezier(.2,.8,.2,1);
}


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


html {
    scroll-behavior: smooth;
}


body {

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

    color: var(--graphite);

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

    line-height: 1.7;

    overflow-x: hidden;
}


body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

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

    background-size: 50px 50px;

    z-index: -2;
}


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


img {
    max-width: 100%;
}


.container {

    width: min(1180px, 92%);

    margin: auto;
}


/* LOADER */

.page-loader {

    position: fixed;

    inset: 0;

    background: var(--white);

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    animation:
        loaderExit 1s ease 1.3s forwards;
}


.loader-logo {

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

    font-size: 42px;

    font-weight: 800;

    letter-spacing: 8px;

    color: var(--graphite);

    animation:
        loaderPulse 1s ease infinite alternate;
}


.loader-line {

    width: 140px;

    height: 3px;

    margin-top: 20px;

    overflow: hidden;

    background: var(--gray);

    position: relative;
}


.loader-line::after {

    content: "";

    position: absolute;

    inset: 0;

    background: var(--graphite);

    transform: translateX(-100%);

    animation:
        loaderLine 1s ease forwards;
}


@keyframes loaderLine {

    to {
        transform: translateX(0);
    }

}


@keyframes loaderPulse {

    from {
        opacity: .5;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


@keyframes loaderExit {

    to {
        opacity: 0;
        visibility: hidden;
    }

}


/* NAVBAR */

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(18px);

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


.nav-wrapper {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.logo {

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 3px;
}


.logo-mark {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--aqua),
            var(--pink)
        );

    color: var(--graphite);

    font-weight: 800;
}


.nav-menu {

    display: flex;

    align-items: center;

    gap: 25px;
}


.nav-menu a {

    position: relative;

    font-size: 13px;

    font-weight: 600;

    transition: var(--transition);
}


.nav-menu a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 100%;

    height: 2px;

    background: var(--pink);

    transform: scaleX(0);

    transform-origin: right;

    transition: var(--transition);
}


.nav-menu a:hover::after,
.nav-menu a.active::after {

    transform: scaleX(1);

    transform-origin: left;
}


.nav-menu a:hover {

    transform: translateY(-2px);
}


.nav-button {

    padding: 11px 18px;

    border-radius: 100px;

    background: var(--graphite);

    color: white !important;
}


.nav-button::after {
    display: none;
}


.menu-toggle {

    display: none;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.menu-toggle span {

    display: block;

    width: 28px;

    height: 2px;

    margin: 5px;

    background: var(--graphite);

    transition: .3s;
}


/* HERO */

.hero {

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

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding: 100px 0;
}


.hero-grid {

    display: grid;

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

    gap: 60px;

    align-items: center;
}


.eyebrow {

    display: inline-block;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.hero h1,
.page-hero h1 {

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

    font-size:
        clamp(48px, 7vw, 86px);

    line-height: .98;

    letter-spacing: -4px;

    color: var(--graphite);

    max-width: 800px;
}


.hero h1 span,
.page-hero h1 span,
.section-heading h2 span,
.split-content h2 span,
.story-content h2 span,
.quality-content h2 span {

    background:
        linear-gradient(
            90deg,
            #4d4d4d,
            #777777
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.hero p {

    max-width: 640px;

    font-size: 17px;

    margin:
        28px 0;

    color:
        rgba(77,77,77,.75);
}


.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 30px;
}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 100px;

    font-size: 13px;

    font-weight: 700;

    transition: var(--transition);
}


.btn-primary {

    background: var(--graphite);

    color: white;

    box-shadow:
        0 15px 35px
        rgba(77,77,77,.18);
}


.btn-primary:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 50px
        rgba(77,77,77,.25);
}


.btn-outline {

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

    background: white;
}


.btn-outline:hover {

    background: var(--aqua);

    border-color: var(--aqua);

    transform:
        translateY(-5px);
}


.btn-dark {

    background: var(--graphite);

    color: white;
}


.btn-light {

    background: white;

    color: var(--graphite);
}


.hero-trust {

    display: flex;

    gap: 35px;

    margin-top: 55px;
}


.hero-trust div {

    display: flex;

    flex-direction: column;
}


.hero-trust strong {

    font-family: "Manrope";

    font-size: 23px;
}


.hero-trust span {

    font-size: 11px;

    opacity: .65;
}


/* HERO VISUAL */

.hero-visual {

    position: relative;

    min-height: 560px;

    display: grid;

    place-items: center;
}


.hero-circle {

    width:
        min(450px, 80vw);

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--aqua),
            var(--yellow) 50%,
            var(--pink)
        );

    padding: 20px;

    animation:
        heroFloat 7s ease-in-out infinite;
}


.circle-inner {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    position: relative;

    overflow: hidden;

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

    backdrop-filter:
        blur(10px);

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

    display: grid;

    place-items: center;
}


.fabric-lines {

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(
            45deg,
            rgba(77,77,77,.08) 0,
            rgba(77,77,77,.08) 1px,
            transparent 1px,
            transparent 12px
        );

    animation:
        fabricMove 12s linear infinite;
}


@keyframes fabricMove {

    to {
        background-position:
            150px 150px;
    }

}


.hero-center {

    position: relative;

    z-index: 2;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    align-content: center;

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

    box-shadow:
        var(--shadow);

    text-align: center;
}


.hero-center span {

    font-family: "Manrope";

    font-size: 24px;

    font-weight: 800;

    letter-spacing: 3px;
}


.hero-center small {

    font-size: 8px;

    letter-spacing: 2px;

    margin-top: 8px;
}


.floating-card {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px 20px;

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

    backdrop-filter:
        blur(14px);

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

    border-radius: 18px;

    box-shadow:
        0 20px 60px
        rgba(77,77,77,.12);

    animation:
        cardFloat 5s ease-in-out infinite;
}


.card-top {

    top: 50px;

    right: 10px;
}


.card-bottom {

    bottom: 70px;

    left: 5px;

    animation-delay: -2s;
}


.mini-icon {

    width: 36px;

    height: 36px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    background: var(--yellow);
}


.mini-number {

    font-weight: 800;

    color: var(--graphite);
}


.floating-card strong,
.floating-card small {

    display: block;
}


.floating-card strong {

    font-size: 12px;
}


.floating-card small {

    font-size: 10px;

    opacity: .6;
}


@keyframes heroFloat {

    0%,100% {
        transform: translateY(0) rotate(0);
    }

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

}


@keyframes cardFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


/* HERO BACKGROUND SHAPES */

.hero-shape {

    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    opacity: .55;

    z-index: -1;

    animation:
        shapeMove 9s ease-in-out infinite;
}


.shape-one {

    width: 250px;

    height: 250px;

    background: var(--aqua);

    top: 5%;

    left: -100px;
}


.shape-two {

    width: 200px;

    height: 200px;

    background: var(--pink);

    bottom: 0;

    right: -80px;

    animation-delay: -3s;
}


.shape-three {

    width: 120px;

    height: 120px;

    background: var(--yellow);

    top: 20%;

    right: 35%;

    animation-delay: -5s;
}


@keyframes shapeMove {

    0%,100% {
        transform:
            translate(0,0);
    }

    50% {
        transform:
            translate(30px,-30px);
    }

}


/* SECTIONS */

.section {

    padding: 120px 0;
}


.section-heading {

    max-width: 760px;

    margin-bottom: 60px;
}


.section-heading.centered {

    margin-left: auto;

    margin-right: auto;

    text-align: center;
}


.section-heading h2,
.split-content h2,
.story-content h2,
.quality-content h2 {

    font-family: "Manrope";

    font-size:
        clamp(38px, 5vw, 62px);

    line-height: 1.05;

    letter-spacing: -2.5px;

    color: var(--graphite);

    margin-bottom: 25px;
}


.section-heading p {

    max-width: 700px;

    color:
        rgba(77,77,77,.7);
}


/* FEATURES */

.feature-grid {

    display: grid;

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

    gap: 22px;
}


.feature-card {

    padding: 38px;

    border-radius: var(--radius);

    background: white;

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

    transition: var(--transition);

    position: relative;

    overflow: hidden;
}


.feature-card::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: var(--aqua);

    right: -30px;

    top: -30px;

    opacity: .5;
}


.feature-card:hover {

    transform:
        translateY(-12px);

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


.feature-number {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 60px;
}


.feature-card h3 {

    font-family: "Manrope";

    font-size: 25px;

    margin-bottom: 15px;
}


.feature-card p {

    font-size: 14px;

    color:
        rgba(77,77,77,.7);

    margin-bottom: 25px;
}


.feature-card a,
.text-link {

    font-size: 13px;

    font-weight: 800;
}


/* SPLIT */

.split-section {

    background:
        linear-gradient(
            180deg,
            #fff,
            #fafafa
        );
}


.split-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}


.visual-panel {

    min-height: 520px;

    border-radius: 35px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--aqua),
            var(--yellow),
            var(--pink)
        );

    padding: 50px;

    display: flex;

    align-items: flex-end;
}


.panel-grid {

    position: absolute;

    inset: 0;

    opacity: .25;

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

    background-size: 40px 40px;

    transform:
        perspective(500px)
        rotateX(55deg)
        scale(1.5);

    transform-origin: center bottom;

    animation:
        gridMove 10s linear infinite;
}


@keyframes gridMove {

    to {
        background-position:
            0 200px;
    }

}


.panel-content {

    position: relative;

    z-index: 2;

    max-width: 420px;

    padding: 35px;

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

    backdrop-filter:
        blur(12px);

    border-radius: 25px;
}


.panel-content > span {

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 800;
}


.panel-content > strong {

    display: block;

    font-family: "Manrope";

    font-size: 30px;

    line-height: 1.1;

    margin: 15px 0 30px;
}


.process-line {

    display: grid;

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

    gap: 8px;
}


.process-line div {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.process-line b {

    font-size: 10px;
}


.process-line span {

    font-size: 9px;
}


/* STATS */

.stats-section {

    padding: 75px 0;

    background: var(--graphite);

    color: white;
}


.stats-grid {

    display: grid;

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

    gap: 30px;
}


.stat {

    text-align: center;

    padding: 25px;

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


.stat:last-child {
    border: 0;
}


.stat strong {

    display: block;

    font-family: "Manrope";

    font-size: 52px;
}


.stat span {

    font-size: 11px;

    opacity: .65;

    letter-spacing: 1px;
}


/* CTA */

.cta-section {

    padding: 100px 0;
}


.cta-box {

    padding: 60px;

    border-radius: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    background:
        linear-gradient(
            120deg,
            var(--aqua),
            var(--yellow),
            var(--pink)
        );
}


.cta-box h2 {

    font-family: "Manrope";

    font-size:
        clamp(35px,4vw,55px);

    line-height: 1;

    max-width: 650px;
}


.cta-box p {

    margin-top: 15px;

    max-width: 600px;
}


/* PAGE HERO */

.page-hero {

    min-height: 65vh;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            rgba(178,249,255,.55),
            rgba(255,250,141,.38),
            rgba(255,177,197,.45)
        );
}


.page-hero-content {

    position: relative;

    z-index: 2;
}


.page-hero p {

    max-width: 680px;

    font-size: 17px;

    margin-top: 30px;
}


.hero-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(4px);

    animation:
        orbFloat 8s ease-in-out infinite;
}


.orb-a {

    width: 350px;

    height: 350px;

    background: var(--aqua);

    right: -120px;

    top: -100px;
}


.orb-b {

    width: 220px;

    height: 220px;

    background: var(--pink);

    left: -80px;

    bottom: -80px;

    animation-delay: -3s;
}


@keyframes orbFloat {

    50% {
        transform:
            translate(-30px,30px)
            scale(1.1);
    }

}


/* STORY */

.story-grid {

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    gap: 80px;

    align-items: center;
}


.story-content p {

    margin:
        0 0 20px;

    color:
        rgba(77,77,77,.75);
}


.story-card {

    min-height: 480px;

    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            var(--aqua),
            var(--pink)
        );

    padding: 20px;

    transform:
        rotate(2deg);

    transition: var(--transition);
}


.story-card:hover {

    transform:
        rotate(0)
        translateY(-10px);
}


.story-card-inner {

    height: 100%;

    border-radius: 28px;

    padding: 45px;

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.story-card-inner > span {

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 800;
}


.story-card-inner strong {

    font-family: "Manrope";

    font-size: 42px;

    line-height: 1.05;
}


.signature {

    font-family: "Manrope";

    letter-spacing: 5px;

    font-weight: 800;
}


/* LIGHT */

.light-section {

    background:
        #f8f8f8;
}


.values-grid {

    display: grid;

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

    gap: 20px;
}


.value-card {

    padding: 35px;

    background: white;

    border-radius: 25px;

    transition: var(--transition);
}


.value-card:hover {

    transform:
        translateY(-10px);

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


.value-card > span {

    font-size: 11px;

    font-weight: 800;
}


.value-card h3 {

    font-family: "Manrope";

    margin:
        40px 0 15px;

    font-size: 23px;
}


.value-card p {

    font-size: 13px;

    color:
        rgba(77,77,77,.7);
}


/* MISSION */

.mission-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;
}


.mission-card {

    padding: 55px;

    border-radius: 30px;

    min-height: 430px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.mission-one {

    background: var(--aqua);
}


.mission-two {

    background: var(--yellow);
}


.mission-card h2 {

    font-family: "Manrope";

    font-size: 38px;

    line-height: 1.1;
}


/* SERVICES */

.services-grid {

    display: grid;

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

    gap: 20px;
}


.service-card {

    padding: 38px;

    border-radius: 26px;

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

    background: white;

    transition: var(--transition);

    position: relative;

    overflow: hidden;
}


.service-card:hover {

    transform:
        translateY(-12px);

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


.service-icon {

    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            var(--aqua),
            var(--pink)
        );

    font-weight: 800;

    font-size: 12px;

    margin-bottom: 35px;
}


.service-card h3 {

    font-family: "Manrope";

    font-size: 25px;

    margin-bottom: 14px;
}


.service-card p {

    font-size: 13px;

    color:
        rgba(77,77,77,.7);

    margin-bottom: 20px;
}


.service-card ul {

    list-style: none;
}


.service-card li {

    font-size: 12px;

    padding: 8px 0;

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


.service-card li::before {

    content: "✓";

    margin-right: 8px;
}


/* PROCESS */

.process-section {

    padding: 110px 0;

    background:
        linear-gradient(
            135deg,
            #f7f7f7,
            #fff
        );
}


.process-grid {

    display: grid;

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

    gap: 20px;
}


.process-step {

    padding: 35px;

    border-top:
        3px solid var(--graphite);
}


.process-step strong {

    font-family: "Manrope";

    font-size: 42px;
}


.process-step h3 {

    font-family: "Manrope";

    margin:
        25px 0 10px;
}


/* PRODUCTS */

.product-grid {

    display: grid;

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

    gap: 25px;
}


.product-card {

    border-radius: 25px;

    overflow: hidden;

    background: white;

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

    transition: var(--transition);
}


.product-card:hover {

    transform:
        translateY(-10px);

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


.product-art {

    height: 240px;

    display: grid;

    place-items: center;

    position: relative;

    overflow: hidden;
}


.product-art::before {

    content: "";

    position: absolute;

    inset: -50%;

    background:
        repeating-linear-gradient(
            45deg,
            rgba(77,77,77,.15) 0,
            rgba(77,77,77,.15) 2px,
            transparent 2px,
            transparent 15px
        );

    animation:
        productMove 12s linear infinite;
}


.product-art span {

    position: relative;

    z-index: 2;

    font-family: "Manrope";

    font-size: 25px;

    font-weight: 800;

    letter-spacing: 5px;
}


.art-one {
    background: var(--aqua);
}


.art-two {
    background: var(--yellow);
}


.art-three {
    background: var(--pink);
}


.art-four {
    background: var(--yellow);
}


.art-five {
    background: var(--aqua);
}


.art-six {
    background: var(--pink);
}


@keyframes productMove {

    to {
        transform:
            rotate(360deg);
    }

}


.product-content {

    padding: 30px;
}


.product-label {

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;
}


.product-content h3 {

    font-family: "Manrope";

    font-size: 25px;

    margin:
        12px 0;
}


.product-content p {

    font-size: 13px;

    color:
        rgba(77,77,77,.7);

    margin-bottom: 20px;
}


.product-content a {

    font-size: 12px;

    font-weight: 800;
}


/* DARK SECTION */

.dark-section {

    padding: 110px 0;

    background: var(--graphite);

    color: white;
}


.dark-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;
}


.dark-grid h2 {

    font-family: "Manrope";

    font-size:
        clamp(40px,5vw,65px);

    line-height: 1;
}


.dark-grid p {

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

    margin-bottom: 25px;
}


/* INDUSTRIES */

.industry-list {

    border-top:
        1px solid rgba(77,77,77,.15);
}


.industry-item {

    display: grid;

    grid-template-columns: 130px 1fr;

    gap: 40px;

    padding: 55px 0;

    border-bottom:
        1px solid rgba(77,77,77,.15);

    transition: var(--transition);
}


.industry-item:hover {

    padding-left: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(178,249,255,.15),
            transparent
        );
}


.industry-number {

    font-family: "Manrope";

    font-size: 30px;

    font-weight: 800;
}


.industry-item h2 {

    font-family: "Manrope";

    font-size: 35px;

    margin-bottom: 15px;
}


.industry-item p {

    max-width: 800px;

    color:
        rgba(77,77,77,.7);
}


/* SUSTAINABILITY */

.sustainability-hero {

    background:
        linear-gradient(
            135deg,
            var(--aqua),
            #fff,
            var(--yellow)
        );
}


.sustainability-graphic {

    min-height: 500px;

    display: grid;

    place-items: center;

    position: relative;
}


.eco-orbit {

    position: absolute;

    border:
        1px solid rgba(77,77,77,.3);

    border-radius: 50%;

    animation:
        orbitRotate 15s linear infinite;
}


.orbit-one {

    width: 400px;

    height: 400px;
}


.orbit-two {

    width: 280px;

    height: 280px;

    animation-duration: 10s;

    animation-direction: reverse;
}


.eco-core {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    background: var(--pink);

    display: grid;

    place-items: center;

    text-align: center;

    box-shadow:
        0 20px 60px
        rgba(77,77,77,.15);
}


.eco-core span {

    font-size: 45px;

    font-weight: 300;
}


.eco-core small {

    font-size: 8px;

    letter-spacing: 2px;
}


@keyframes orbitRotate {

    to {
        transform:
            rotate(360deg);
    }

}


/* QUALITY */

.quality-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 100px;

    align-items: center;
}


.quality-meter {

    display: grid;

    place-items: center;
}


.meter-circle {

    width: 330px;

    height: 330px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background:
        conic-gradient(
            var(--aqua) 0 30%,
            var(--yellow) 30% 65%,
            var(--pink) 65% 100%
        );

    animation:
        meterRotate 12s linear infinite;
}


.meter-circle > div {

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background: white;

    display: grid;

    place-items: center;

    align-content: center;

    text-align: center;
}


.meter-circle strong {

    font-family: "Manrope";

    font-size: 70px;
}


.meter-circle span {

    font-size: 10px;

    letter-spacing: 2px;
}


.meter-label {

    margin-top: 30px;

    font-size: 11px;

    text-align: center;

    letter-spacing: 1px;
}


@keyframes meterRotate {

    to {
        transform:
            rotate(360deg);
    }

}


.quality-process {

    display: grid;

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

    gap: 25px;
}


.quality-step {

    padding: 35px;

    border-radius: 25px;

    background: white;

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


.quality-step > span {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: var(--aqua);

    font-weight: 800;
}


.quality-step h3 {

    font-family: "Manrope";

    margin:
        25px 0 10px;
}


/* CONTACT */

.contact-grid {

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 90px;

    align-items: start;
}


.contact-info h2 {

    font-family: "Manrope";

    font-size:
        clamp(40px,5vw,60px);

    line-height: 1;

    margin-bottom: 25px;
}


.contact-info > p {

    color:
        rgba(77,77,77,.7);

    margin-bottom: 35px;
}


.contact-detail {

    padding: 22px 0;

    border-bottom:
        1px solid rgba(77,77,77,.12);
}


.contact-detail span {

    display: block;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 7px;
}


.contact-detail a,
.contact-detail strong {

    font-size: 14px;
}


.contact-form-wrap {

    padding: 40px;

    border-radius: 30px;

    background: white;

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


.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;
}


.form-group {

    margin-bottom: 20px;
}


.form-group label {

    display: block;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 8px;
}


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

    width: 100%;

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

    border-radius: 12px;

    padding: 14px 16px;

    outline: none;

    font-family: inherit;

    background: #fafafa;

    transition: .3s;
}


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

    border-color: var(--graphite);

    background: white;

    box-shadow:
        0 0 0 4px
        rgba(178,249,255,.35);
}


.submit-btn {

    border: 0;

    cursor: pointer;

    width: 100%;
}


.form-message {

    margin-top: 15px;

    font-size: 12px;

    font-weight: 700;
}


.contact-banner {

    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--yellow),
            var(--aqua)
        );

    text-align: center;
}


.contact-banner h2 {

    max-width: 800px;

    margin:
        0 auto 30px;

    font-family: "Manrope";

    font-size:
        clamp(35px,5vw,60px);

    line-height: 1;
}


/* WHATSAPP */

.whatsapp-button {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--graphite);

    color: white;

    font-size: 12px;

    font-weight: 800;

    box-shadow:
        0 15px 40px
        rgba(77,77,77,.25);

    z-index: 500;

    animation:
        whatsappPulse 2s infinite;
}


@keyframes whatsappPulse {

    0%,100% {
        box-shadow:
            0 15px 40px
            rgba(77,77,77,.25);
    }

    50% {
        box-shadow:
            0 15px 50px
            rgba(77,77,77,.45);
    }

}


/* FOOTER */

.footer {

    padding-top: 80px;

    background:
        #eeeeee;

    color: var(--graphite);
}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr .7fr .7fr 1fr;

    gap: 50px;

    padding-bottom: 60px;
}


.footer-brand p {

    max-width: 400px;

    margin-top: 20px;

    font-size: 13px;

    color:
        rgba(77,77,77,.65);
}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.footer-column h4 {

    font-family: "Manrope";

    margin-bottom: 10px;
}


.footer-column a,
.footer-column p {

    font-size: 12px;

    color:
        rgba(77,77,77,.7);
}


.footer-column a:hover {

    color: var(--graphite);

    transform:
        translateX(4px);
}


.footer-bottom {

    padding: 25px 0;

    border-top:
        1px solid rgba(77,77,77,.12);

    display: flex;

    justify-content: space-between;

    font-size: 10px;

    color:
        rgba(77,77,77,.6);
}


/* SCROLL ANIMATIONS */

.reveal {

    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.8,.2,1);
}


.reveal-left {

    opacity: 0;

    transform:
        translateX(-60px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.8,.2,1);
}


.reveal-right {

    opacity: 0;

    transform:
        translateX(60px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.8,.2,1);
}


.reveal.active,
.reveal-left.active,
.reveal-right.active {

    opacity: 1;

    transform:
        translate(0);
}


.delay-1 {
    transition-delay: .12s;
}


.delay-2 {
    transition-delay: .24s;
}


.delay-3 {
    transition-delay: .36s;
}


/* RESPONSIVE */

@media(max-width:1050px) {

    .nav-menu {
        gap: 14px;
    }

    .hero-grid,
    .split-grid,
    .story-grid,
    .quality-grid,
    .contact-grid {
        gap: 45px;
    }

}


@media(max-width:850px) {

    .menu-toggle {
        display: block;
    }


    .nav-menu {

        position: absolute;

        top: 82px;

        left: 0;

        right: 0;

        padding: 25px;

        background: white;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        transform:
            translateY(-130%);

        opacity: 0;

        transition: .4s;

        box-shadow:
            0 20px 30px
            rgba(77,77,77,.08);
    }


    .nav-menu.open {

        transform:
            translateY(0);

        opacity: 1;
    }


    .nav-menu a {
        padding: 12px 0;
    }


    .hero-grid,
    .split-grid,
    .story-grid,
    .mission-grid,
    .quality-grid,
    .contact-grid,
    .dark-grid {

        grid-template-columns: 1fr;
    }


    .hero {

        padding: 80px 0;
    }


    .hero-visual {

        min-height: 470px;
    }


    .feature-grid,
    .services-grid,
    .product-grid {

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


    .values-grid {

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


    .stats-grid {

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


    .process-grid,
    .quality-process {

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


    .footer-grid {

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

}


@media(max-width:600px) {

    .section {
        padding: 80px 0;
    }


    .hero h1,
    .page-hero h1 {

        font-size: 47px;

        letter-spacing: -2.5px;
    }


    .hero-trust {

        flex-direction: column;

        gap: 15px;
    }


    .hero-circle {

        width: 320px;
    }


    .floating-card {

        transform:
            scale(.85);
    }


    .card-top {

        right: -15px;
    }


    .card-bottom {

        left: -20px;
    }


    .feature-grid,
    .services-grid,
    .product-grid,
    .values-grid,
    .stats-grid,
    .process-grid,
    .quality-process {

        grid-template-columns: 1fr;
    }


    .cta-box {

        flex-direction: column;

        align-items: flex-start;

        padding: 40px;
    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .footer-bottom {

        flex-direction: column;

        gap: 8px;
    }


    .industry-item {

        grid-template-columns: 60px 1fr;

        gap: 15px;
    }


    .industry-item h2 {

        font-size: 28px;
    }


    .form-row {

        grid-template-columns: 1fr;
    }


    .contact-form-wrap {

        padding: 25px;
    }


    .meter-circle {

        width: 280px;

        height: 280px;
    }


    .meter-circle > div {

        width: 210px;

        height: 210px;
    }


    .orbit-one {

        width: 300px;

        height: 300px;
    }


    .orbit-two {

        width: 210px;

        height: 210px;
    }

}