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

        :root {
            --orange: #f28c00;
            --orange-light: #ffad32;
            --orange-dark: #d87400;

            --dark: #151515;
            --dark-soft: #242424;
            --gray: #6d6d6d;
            --gray-light: #f5f5f5;

            --white: #ffffff;

            --border: rgba(20, 20, 20, 0.10);
            --shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

            --radius: 24px;
            --container: 1220px;
        }


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

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family:
                Inter,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            color: var(--dark);
            background: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
        }

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

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

        button,
        input,
        textarea,
        select {
            font: inherit;
        }

        button {
            cursor: pointer;
        }

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

        .section {
            position: relative;
            padding: 110px 0;
        }


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

        .header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1000;

			background: #ffffff;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

			transition: box-shadow 0.3s ease;
		}

		.header.scrolled {
			background: #ffffff;
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
		}

        .nav {
            min-height: 90px;

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

            gap: 30px;
        }

        .logo-wrap {
            background: white;
            padding: 8px 10px;
            border-radius: 12px;
        }

        .logo {
            width: 180px;
            height: auto;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;

            list-style: none;
        }

        .nav-links a {
            position: relative;
            font-size: 0.95rem;
            font-weight: 600;
        }

        .nav-links a::after {
            content: "";

            position: absolute;
            left: 0;
            bottom: -7px;

            width: 0;
            height: 2px;

            background: var(--orange);

            transition: width 0.25s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-cta {
            color: white !important;
            background: var(--dark);

            padding: 13px 22px;
            border-radius: 100px;

            transition:
                transform 0.25s ease,
                background 0.25s ease;
        }

        .nav-cta:hover {
            background: var(--orange);
            transform: translateY(-2px);
        }

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

        .burger {
            display: none;

            width: 44px;
            height: 44px;

            border: 0;
            border-radius: 50%;

            background: var(--dark);
        }

        .burger span {
            display: block;

            width: 19px;
            height: 2px;

            margin: 4px auto;

            background: white;

            transition: 0.25s;
        }


       

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

.hero {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #ffffff 0%,
            #fff7ed 30%,
            #ffffff 60%,
            #f7f7f7 100%
        );

    background-size: 300% 300%;

    animation: heroGradient 14s ease infinite;
}


/* ---------------------------------------------------------
   DEGRADE DE FOND ANIME
--------------------------------------------------------- */

@keyframes heroGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* ---------------------------------------------------------
   CANVAS PARTICULES
--------------------------------------------------------- */

#particles {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    pointer-events: none;
}


/* ---------------------------------------------------------
   HALOS LUMINEUX
--------------------------------------------------------- */

.hero-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242, 140, 0, 0.28) 0%,
            rgba(242, 140, 0, 0.14) 30%,
            rgba(242, 140, 0, 0.05) 50%,
            transparent 70%
        );

    filter: blur(25px);

    right: -180px;
    top: 5%;

    z-index: 0;

    animation:
        floatGlow
        9s
        ease-in-out
        infinite
        alternate;
}


.hero-glow.secondary {
    width: 500px;
    height: 500px;

    left: -180px;
    right: auto;

    top: 45%;

    opacity: 0.65;

    animation:
        floatGlowSecondary
        12s
        ease-in-out
        infinite
        alternate;
}


/* ---------------------------------------------------------
   ANIMATION HALO DROIT
--------------------------------------------------------- */

@keyframes floatGlow {

    from {
        transform:
            translate3d(-40px, -30px, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(80px, 70px, 0)
            scale(1.25);
    }

}


/* ---------------------------------------------------------
   ANIMATION HALO GAUCHE
--------------------------------------------------------- */

@keyframes floatGlowSecondary {

    from {
        transform:
            translate3d(0, 30px, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(100px, -60px, 0)
            scale(1.35);
    }

}


/* ---------------------------------------------------------
   CONTENU HERO
--------------------------------------------------------- */

.hero-content {
    position: relative;

    z-index: 3;

    width: min(850px, 100%);

    padding-top: 100px;
}


/* ---------------------------------------------------------
   BADGE "SITE BIENTOT"
--------------------------------------------------------- */

.coming-soon {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 9px 15px;

    border-radius: 100px;

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

    border: 1px solid rgba(20, 20, 20, 0.10);

    backdrop-filter: blur(10px);

    font-size: 0.85rem;
    font-weight: 700;

    margin-bottom: 30px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);
}


.coming-soon-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--orange);

    box-shadow:
        0 0 0 rgba(242, 140, 0, 0.4);

    animation:
        pulseDot
        2s
        infinite;
}


/* ---------------------------------------------------------
   PULSATION DU POINT
--------------------------------------------------------- */

@keyframes pulseDot {

    0% {
        box-shadow:
            0 0 0 0
            rgba(242, 140, 0, 0.50);
    }

    70% {
        box-shadow:
            0 0 0 10px
            rgba(242, 140, 0, 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(242, 140, 0, 0);
    }

}


/* ---------------------------------------------------------
   TITRE
--------------------------------------------------------- */

.hero h1 {
    max-width: 900px;

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

    line-height: 0.98;

    letter-spacing: -0.065em;

    margin-bottom: 30px;
}


.hero h1 span {
    color: var(--orange);
}


/* ---------------------------------------------------------
   TEXTE
--------------------------------------------------------- */

.hero-text {
    max-width: 740px;

    color: var(--gray);

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

    margin-bottom: 38px;
}


/* ---------------------------------------------------------
   BOUTONS
--------------------------------------------------------- */

.hero-actions {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 15px;
}




@keyframes scrollMouse {

    0% {
        opacity: 0;

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

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;

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

}


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

@media (max-width: 800px) {

    .hero h1 {
        font-size:
            clamp(
                3rem,
                13vw,
                5rem
            );
    }


    .hero-glow {
        width: 500px;
        height: 500px;

        right: -250px;
    }

    .hero-glow.secondary {
        width: 400px;
        height: 400px;

        left: -220px;
    }

}


@media (max-width: 620px) {

    .hero {
        min-height: 920px;
    }

    .hero-content {
        padding-top: 80px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

}


        /* =========================================================
           TITRES
        ========================================================= */

        .section-tag {
            color: var(--orange);

            font-size: 0.8rem;
            font-weight: 800;

            text-transform: uppercase;
            letter-spacing: 0.16em;

            margin-bottom: 15px;
        }

        .section-title {
            max-width: 800px;

            font-size: clamp(2.2rem, 4vw, 4rem);
            line-height: 1.05;

            letter-spacing: -0.04em;

            margin-bottom: 20px;
        }

        .section-intro {
            max-width: 750px;

            color: var(--gray);

            font-size: 1.08rem;

            margin-bottom: 60px;
        }


        /* =========================================================
           UNIVERS
        ========================================================= */

        .univers {
            background: white;
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            gap: 22px;
        }

        .product-card {
            position: relative;

            min-height: 330px;

            padding: 35px;

            border-radius: var(--radius);

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

            background:
                linear-gradient(
                    145deg,
                    #ffffff,
                    #f8f8f8
                );

            overflow: hidden;

            transform-style: preserve-3d;

            transition:
                transform 0.2s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease;
        }

        .product-card::before {
            content: "";

            position: absolute;

            width: 220px;
            height: 220px;

            right: -100px;
            top: -100px;

            border-radius: 50%;

            background: rgba(242, 140, 0, 0.08);

            transition:
                transform 0.5s ease,
                background 0.5s ease;
        }

        .product-card:hover {
            border-color: rgba(242, 140, 0, 0.3);

            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.10);
        }

        .product-card:hover::before {
            transform: scale(1.45);

            background: rgba(242, 140, 0, 0.12);
        }

        .card-number {
            color: rgba(0, 0, 0, 0.16);

            font-size: 0.82rem;
            font-weight: 700;

            margin-bottom: 65px;
        }

        .card-icon {
            width: 55px;
            height: 55px;

            display: grid;
            place-items: center;

            border-radius: 17px;

            margin-bottom: 22px;

            background: rgba(242, 140, 0, 0.10);

            font-size: 1.7rem;

            transition:
                transform 0.35s ease,
                background 0.35s ease;
        }

        .product-card:hover .card-icon {
            transform: translateY(-5px) rotate(-4deg);

            background: var(--orange);
        }

        .product-card h3 {
            font-size: 1.35rem;

            margin-bottom: 10px;
        }

        .product-card p {
            color: var(--gray);

            font-size: 0.95rem;
        }
		.accordion-toggle {
			width: 100%;

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

			margin-top: 25px;
			padding: 14px 0 0;

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

			background: transparent;

			color: var(--dark);

			font-weight: 700;

			cursor: pointer;
		}

		.accordion-icon {
			width: 30px;
			height: 30px;

			display: grid;
			place-items: center;

			border-radius: 50%;

			background: rgba(242, 140, 0, 0.10);
			color: var(--orange);

			font-size: 1.25rem;

			transition:
				transform 0.3s ease,
				background 0.3s ease,
				color 0.3s ease;
		}

		.accordion-content {
			display: grid;
			grid-template-rows: 0fr;

			transition: grid-template-rows 0.4s ease;
		}

		.accordion-content > * {
			overflow: hidden;
		}

		.universe-card.open .accordion-content {
			grid-template-rows: 1fr;
		}

		.universe-card.open .accordion-icon {
			transform: rotate(45deg);

			background: var(--orange);
			color: white;
		}

		.product-list {
			list-style: none;

			padding-top: 18px;
		}

		.product-list li {
			position: relative;

			padding: 9px 0 9px 20px;

			color: var(--gray);

			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		}

		.product-list li::before {
			content: "";

			position: absolute;

			left: 0;
			top: 18px;

			width: 6px;
			height: 6px;

			border-radius: 50%;

			background: var(--orange);
		}

        /* =========================================================
           EXPERTISE
        ========================================================= */

        .expertise {
            position: relative;

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

			color: var(--dark);

			overflow: hidden;
		}

		.expertise::after {
			content: "";

			position: absolute;

			right: -220px;
			top: -180px;

			width: 600px;
			height: 600px;

			border-radius: 50%;

			background:
				radial-gradient(
					circle,
					rgba(242, 140, 0, 0.16),
					rgba(242, 140, 0, 0.05) 45%,
					transparent 70%
				);

			filter: blur(15px);
		}

        .expertise-grid {
            position: relative;
            z-index: 2;

            display: grid;
            grid-template-columns: 0.9fr 1.1fr;

            gap: 90px;
            align-items: center;
        }

        .big-number {
            font-size: clamp(7rem, 15vw, 12rem);

            line-height: 0.8;

            letter-spacing: -0.08em;

            color: var(--orange);

            font-weight: 800;
        }

        .big-number-label {
            margin-top: 25px;

            font-size: 1.4rem;
            font-weight: 600;
        }

        .expertise .section-title {
            color: var(--dark);
        }

        .expertise-text {
            color: var(--gray);

            font-size: 1.05rem;

            margin-bottom: 35px;
        }

        .expertise-list {
            list-style: none;
        }

        .expertise-list li {
            display: flex;
            align-items: center;
            gap: 15px;
			color: var(--dark);
            padding: 15px 0;

            border-bottom:
               1px solid rgba(0, 0, 0, 0.08);
        }

        .expertise-list li::before {
            content: "→";

            color: var(--orange);

            font-weight: 800;
        }
		.big-number {
				color: var(--orange);
			}

			.big-number-label {
				color: var(--dark);
			}

        /* =========================================================
           BUSINESS / EUROPE
        ========================================================= */

        .business {
            background: #f7f7f7;
        }

        .business-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;

            gap: 80px;
            align-items: center;
        }

        .business-visual {
            position: relative;

            min-height: 500px;

            border-radius: 35px;

            overflow: hidden;

            background:
                radial-gradient(
                    circle at 25% 20%,
                    rgba(255, 255, 255, 0.15),
                    transparent 35%
                ),
                linear-gradient(
                    145deg,
                    #232323,
                    #0d0d0d
                );
        }

        .visual-orbit {
            position: absolute;

            width: 360px;
            height: 360px;

            left: 50%;
            top: 50%;

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

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

            border-radius: 50%;

            animation: spinOrbit 20s linear infinite;
        }

        .visual-orbit:nth-child(2) {
            width: 250px;
            height: 250px;

            animation-direction: reverse;
            animation-duration: 14s;
        }

        @keyframes spinOrbit {
            to {
                transform:
                    translate(-50%, -50%)
                    rotate(360deg);
            }
        }

        .orbit-dot {
            position: absolute;

            width: 15px;
            height: 15px;

            border-radius: 50%;

            background: var(--orange);

            left: 50%;
            top: -7px;

            box-shadow:
                0 0 25px rgba(242, 140, 0, 0.8);
        }

        .visual-center {
            position: absolute;

            left: 50%;
            top: 50%;

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

            width: 140px;
            height: 140px;

            border-radius: 50%;

            display: grid;
            place-items: center;

            background: white;

            padding: 22px;

            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.4);
        }

        .business-content p {
            color: var(--gray);

            margin-bottom: 25px;
        }

        .business-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            margin-top: 30px;
        }

        .business-badge {
            padding: 10px 16px;

            border-radius: 100px;

            background: white;

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

            font-size: 0.88rem;
            font-weight: 700;
        }


        /* =========================================================
           FUTURE SHOP
        ========================================================= */

        .future {
            text-align: center;

            overflow: hidden;
        }

        .future-box {
            position: relative;

            padding: 85px 30px;

            border-radius: 36px;

            background:
                linear-gradient(
                    135deg,
                    #ff9b11,
                    #f27e00
                );

            color: white;

            overflow: hidden;
        }

        .future-box::before,
        .future-box::after {
            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

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

            border-radius: 50%;
        }

        .future-box::before {
            left: -100px;
            top: -150px;
        }

        .future-box::after {
            right: -80px;
            bottom: -180px;
        }

        .future-box h2 {
            position: relative;
            z-index: 2;

            max-width: 850px;

            margin: auto auto 20px;

            font-size: clamp(2.4rem, 5vw, 4.7rem);
            line-height: 1;

            letter-spacing: -0.05em;
        }

        .future-box p {
            position: relative;
            z-index: 2;

            max-width: 650px;

            margin: auto;

            color: rgba(255, 255, 255, 0.85);

            font-size: 1.05rem;
        }


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

        .contact {
            background: #f7f7f7;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 0.85fr 1.15fr;

            gap: 80px;
        }

        .contact-info {
            position: sticky;
            top: 140px;

            align-self: start;
        }

        .contact-info p {
            max-width: 470px;

            color: var(--gray);

            margin-top: 20px;
        }

        .location {
            margin-top: 40px;

            padding-top: 28px;

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

        .location strong {
            display: block;

            margin-bottom: 5px;
        }

        .contact-form {
            padding: 40px;

            border-radius: 30px;

            background: white;

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

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;

            gap: 18px;
        }

        .form-group {
            margin-bottom: 18px;
        }

        .form-group label {
            display: block;

            margin-bottom: 8px;

            font-size: 0.9rem;
            font-weight: 700;
        }

        .form-control {
            width: 100%;

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

            padding: 15px 17px;

            outline: none;

            background: #fbfbfb;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease;
        }

        .form-control:focus {
            background: white;

            border-color: var(--orange);

            box-shadow:
                0 0 0 4px rgba(242, 140, 0, 0.10);
        }

        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

        .checkbox {
            display: flex;
            gap: 10px;
            align-items: flex-start;

            color: var(--gray);

            font-size: 0.82rem;

            margin: 20px 0 25px;
        }

        .checkbox input {
            margin-top: 4px;
        }
		.newsletter-checkbox {
			margin-bottom: 10px;
		}

		.newsletter-checkbox span {
			color: var(--dark);
			font-weight: 500;
		}

		.newsletter-checkbox input {
			accent-color: var(--orange);
		}

		.checkbox input {
			accent-color: var(--orange);
		}
		.submit-btn {
			position: relative;

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

			gap: 14px;

			min-height: 58px;

			padding: 0 28px;

			border: none;
			border-radius: 16px;

			overflow: hidden;

			color: #ffffff;

			background:
				linear-gradient(
					135deg,
					var(--orange),
					var(--orange-dark)
				);

			font-weight: 700;
			font-size: 1rem;

			box-shadow:
				0 12px 30px rgba(242, 140, 0, 0.25);

			transition:
				transform 0.25s ease,
				box-shadow 0.25s ease;
		}

		.submit-btn::before {
			content: "";

			position: absolute;

			top: 0;
			left: -120%;

			width: 70%;
			height: 100%;

			background:
				linear-gradient(
					110deg,
					transparent,
					rgba(255,255,255,0.30),
					transparent
				);

			transform: skewX(-20deg);

			transition: left 0.6s ease;
		}

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

			box-shadow:
				0 18px 38px rgba(242, 140, 0, 0.35);
		}

		.submit-btn:hover::before {
			left: 140%;
		}

		.submit-arrow {
			display: inline-flex;
			align-items: center;
			justify-content: center;

			width: 30px;
			height: 30px;

			border-radius: 50%;

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

			transition:
				transform 0.25s ease,
				background 0.25s ease;
		}

		.submit-btn:hover .submit-arrow {
			transform: translateX(5px);

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

		.submit-btn:active {
			transform: translateY(0);
		}
		
		.mail-success {
			position: fixed;
			top: 105px;
			left: 50%;

			transform: translateX(-50%) translateY(-20px);

			z-index: 2000;

			max-width: calc(100% - 30px);

			padding: 14px 24px;

			background: #ffffff;

			border: 1px solid rgba(242, 140, 0, 0.35);
			border-left: 4px solid var(--orange);

			border-radius: 12px;

			box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

			color: var(--dark);

			font-weight: 600;

			opacity: 0;
			visibility: hidden;

			transition:
				opacity 0.4s ease,
				transform 0.4s ease,
				visibility 0.4s;
		}

		.mail-success.show {
			opacity: 1;
			visibility: visible;

			transform: translateX(-50%) translateY(0);
		}


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

        .footer {
            padding: 45px 0;

            color: rgba(255, 255, 255, 0.6);
            background: #101010;
        }

        .footer-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;

            gap: 30px;

            font-size: 0.88rem;
        }

        .footer-logo {
            width: 130px;

            padding: 7px;

            border-radius: 7px;

            background: transparent;
        }


        /* =========================================================
           REVEAL AU SCROLL
        ========================================================= */

        .reveal {
            opacity: 0;

            transform: translateY(45px);

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

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

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

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

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


        /* =========================================================
           CURSOR LIGHT
        ========================================================= */

        .cursor-light {
            position: fixed;

            pointer-events: none;

            width: 400px;
            height: 400px;

            border-radius: 50%;

            z-index: 0;

            background:
                radial-gradient(
                    circle,
                    rgba(242, 140, 0, 0.055),
                    transparent 65%
                );

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

            transition:
                left 0.1s linear,
                top 0.1s linear;
        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 1000px) {

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

            .expertise-grid,
            .business-grid,
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 55px;
            }

            .contact-info {
                position: static;
            }

        }

        @media (max-width: 800px) {

            .section {
                padding: 80px 0;
            }

            .nav {
                min-height: 75px;
            }

            .logo {
                width: 145px;
            }

            .burger {
                display: block;
            }

            .nav-links {
                position: fixed;

                inset: 75px 15px auto 15px;

                display: flex;
                flex-direction: column;
                align-items: stretch;

                padding: 25px;

                border-radius: 22px;

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

                box-shadow:
                    0 25px 60px rgba(0, 0, 0, 0.15);

                backdrop-filter: blur(20px);

                opacity: 0;
                visibility: hidden;

                transform: translateY(-15px);

                transition: 0.25s ease;
            }

            .nav-links.open {
                opacity: 1;
                visibility: visible;

                transform: translateY(0);
            }

            .nav-links a {
                display: block;

                padding: 11px 0;
            }

            .nav-cta {
                text-align: center;

                margin-top: 5px;
            }

            .hero h1 {
                font-size: clamp(3rem, 13vw, 5rem);
            }

            .scroll-indicator {
                display: none;
            }

            .business-visual {
                min-height: 400px;
            }

        }

        @media (max-width: 620px) {

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

            .hero {
                min-height: 920px;
            }

            .hero-content {
                padding-top: 80px;
            }

            .hero-actions {
                align-items: stretch;
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }

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

            .product-card {
                min-height: 285px;
            }

            .card-number {
                margin-bottom: 40px;
            }

            .contact-form {
                padding: 25px 20px;
            }

            .form-row {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .footer-inner {
                flex-direction: column;
                align-items: flex-start;
            }

            .business-visual {
                min-height: 340px;
            }

            .visual-orbit {
                width: 270px;
                height: 270px;
            }

            .visual-orbit:nth-child(2) {
                width: 185px;
                height: 185px;
            }

            .visual-center {
                width: 110px;
                height: 110px;
            }

        }

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

            *,
            *::before,
            *::after {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

        }