:root {
    /****************** Font sizes ************/
    --fs-000: clamp(0.5277rem, 0.7015rem + -0.2242vw, 0.651rem);
    --fs-100: clamp(0.7035rem, 0.8131rem + -0.1414vw, 0.7813rem);
    --fs-200: clamp(0.9375rem, 0.9374rem + 0.0004vw, 0.9377rem);
    --fs-300: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --fs-400: clamp(1.35rem, 1.2206rem + 0.575vw, 1.6663rem);
    --fs-500: clamp(1.62rem, 1.3741rem + 1.0929vw, 2.2211rem);
    --fs-600: clamp(1.944rem, 1.5281rem + 1.8486vw, 2.9607rem);
    --fs-700: clamp(2.3328rem, 1.6726rem + 2.9343vw, 3.9467rem);
    --fs-800: clamp(2.7994rem, 1.7924rem + 4.4755vw, 5.2609rem);

    /****************** Paddings ************/
    --padding-0: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --padding-1: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
    --padding-2: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
    --padding-3: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --padding-4: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
    --padding-5: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
    --padding-6: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
    --padding-7: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
    --padding-8: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

    /****************** Margins and gaps ************/
    --gap-0: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
    --gap-1: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    --gap-2: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
    --gap-3: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    --gap-4: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
    --gap-5: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    --gap-6: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
    --gap-7: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
    --gap-8: clamp(6.75rem, 4.9091rem + 8.1818vw, 11.25rem);
    --gap-9: clamp(10.125rem, 8.1307rem + 8.8636vw, 15rem);
    --gap-10: clamp(13.5rem, 11.3523rem + 9.5455vw, 18.75rem);

    /****************** Colors ************/
    --bg-body: hsl(150 10% 97%);
    --bg-body-alt: hsl(170 70% 90%);
    --bg-container: hsl(150 10% 100%);

    --text: hsl(150 15% 5%);
    --text-alt: hsl(170 15% 5%);
    --text-muted : hsl(150 15% 30%);
    --text-muted-alt : hsl(170 15% 30%);

    --clr-black: hsl(0 5% 5%);
    --clr-white: hsl(0 5% 95%);
    --clr-accent: hsl(180 100% 41%);
    --clr-primary: hsl(150 100% 41%);

    --clr-border: hsl(150 15% 20%);
    --clr-container: hsl(150 17% 88%);

    /****************** Shadows ************/
    --shadow-light:
        0 2px 4px hsl(0 0% 0% / 0.35),
        0 0 6px hsl(0 0% 100% / 0.04);

    --shadow-medium:
        0 4px 8px hsl(0 0% 0% / 0.45),
        0 0 12px hsl(0 0% 100% / 0.06);

    --shadow-high:
        0 8px 16px hsl(0 0% 0% / 0.60),
        0 0 24px hsl(0 0% 100% / 0.08);
}

@layer reset, base, layout, utilities;

@layer reset {
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        font: inherit;
        box-sizing: border-box;
    }

    html {
        font-size: 16px;
        scroll-behavior: smooth;
        font-family: "Open Sans", inter, sans-serif;
    }

    body {
        min-height: 100dvh;
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.2;
        text-wrap: balance;
    }

    p, span {
        line-height: 1.6;
        text-wrap: pretty;
        color: var(--text-muted);
    }

    ul {
        list-style: none;
    }

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

    button {
        border: none;
        cursor: pointer;
        background: none;
    }

    input, textarea, select {
        border: none;
        outline: none;
        color: inherit;
        background: none;
    }

    img, video, picture, svg {
        height: auto;
        display: block;
        max-width: 100%;
    }
}

@layer base {
    body {
        color: var(--text);
        background-color: var(--bg-body);
    }

    input, textarea, select {
        box-shadow: var(--shadow-light);
        background: var(--bg-container);
        padding: var(--padding-0) var(--padding-1);

        @supports(corner-shape: squircle){
            border-radius: 2rem;
            corner-shape: squircle;
        }
    }


    .img-wrapper img {
        border-radius: 2rem;

        @supports(corner-shape: squircle){
            border-radius: 2rem;
            corner-shape: squircle;
        }
    }

    /************* Header Section *************/
    header {
        box-shadow: var(--shadow-light);
        background-color: var(--bg-container);
    }

    .nav-link:hover, .social-link:hover {
        color: var(--clr-primary);
    }

    @media (width < 768px){
        nav {
            border-radius: 1rem;
            color: var(--text-alt);
            box-shadow: var(--shadow-light);
            background-color: var(--bg-body-alt);
            
            @supports(corner-shape: squircle){
                border-radius: 2rem;
                corner-shape: square square square squircle;
            }

            i {
                color: var(--text-alt);
            }
        }

        header button {
            color: var(--text);
        }
    }
    /************* Header Section *************/

    /************* Hero Section *************/
    .hero-section, .hero-alt-section {
        color: var(--text-alt);
        background-color: var(--bg-body-alt);

        h2 {
            font-size: var(--fs-500);
        }

        p {
            color: var(--text-muted-alt);
        }

    }
    .swiper {
        .swiper-button-prev,
        .swiper-button-next {
            * {
                color: var(--clr-black);
            }
        }

        img {
            border-radius: 1rem;
            box-shadow: var(--shadow-light);
            
            @supports(corner-shape: squircle){
                border-radius: 2rem;
                corner-shape: squircle;
            }
        }
    }

    @media (width < 768px){
        .hero-section h2 {
            font-size: var(--fs-400);
        }
    }
    /************* Hero Section *************/

    /************* Stats Section *************/
    .stat-list li {
        border-radius: 1rem;
        box-shadow: var(--shadow-light);
        background-color: var(--bg-container);

        @supports(corner-shape: squircle){
            border-radius: 2rem;
            corner-shape: squircle;
        }
    }
    /************* Stats Section *************/

    /************* Problem Section *************/
    /************* Problem Section *************/

    /************* How Section *************/
    /************* How Section *************/

    /************* Feature Section *************/
    .feature-list li {
        box-shadow: var(--shadow-light);
        background-color: var(--bg-container);

        @supports(corner-shape: squircle){
            border-radius: 2rem;
            corner-shape: squircle;
        }
    }
    /************* Feature Section *************/

    /************* CTA Section *************/
    .cta-section .wrapper {
        color: var(--text-alt);
        box-shadow: var(--shadow-light);
        background-color: var(--bg-body-alt);

        @supports(corner-shape: squircle){
            border-radius: 2rem;
            corner-shape: squircle;
        }

        p {
            color: var(--text-muted-alt)
        }
    }
    /************* CTA Section *************/

    /************* About pages Section *************/
    .team-section {
        img {
            border-radius: 1rem;
            box-shadow: var(--shadow-medium);

            @supports(corner-shape: squircle){
                border-radius: 2rem;
                corner-shape: squircle;
            }
        }
    }
    /************* About pages Section *************/

    /************* Pricing Section *************/
    .price {
        box-shadow: var(--shadow-light);
        background-color: var(--bg-container);

        @supports(corner-shape: squircle){
            border-radius: 2rem;
            corner-shape: squircle;
        }
    }
    /************* Pricing Section *************/


    /************* Gallery Section *************/
    .gallery-section :where(img, video) {
        border-radius: 1rem;

        @supports(corner-shape: squircle){
            border-radius: 2rem;
            corner-shape: squircle;
        }
    }

    .gallery-tabs .tab-btn {
        border-radius: 2rem;

        &.active {
            color: var(--clr-white);
            background: var(--clr-black);
        }
    }
    /************* Gallery Section *************/

    /************* Ressources Section *************/
    .ressources-section {
        a {
            color: blue;
        }
    }
    /************* Ressources Section *************/

    /************* Footer Section *************/
    footer {
        color: var(--text-alt);
        background-color: var(--bg-body-alt);

        p, span {
            color: var(--text-muted-alt);
        }
    }
    /************* Footer Section *************/
}

@layer layout {
    section + section {
        margin-top: var(--gap-6);
    }

    .wrapper {
        padding-block: var(--gap-5);
    }

    /************* Header Section *************/
    header {
        z-index: 1;
        position: sticky;
        inset: 0 0 auto 0;
    }

    header .wrapper {
        display: flex;
        align-items: center;
        padding: var(--padding-1) 0;
        justify-content: space-between;
    }

    .header-btns {
        display: flex;
        gap: var(--gap-2);
        align-items: center;
    }

    .logo {
        width: 120px;
        width: max(120px, 15%);
    }

    nav {
        display: flex;
        align-items: center;
        column-gap: var(--gap-1);
    }

    .socials {
        display: flex;
        gap: var(--gap-2);
        margin-top: var(--gap-2);
    }

    #open-menu, #close-menu {
        display: none;
    }

    @media (width < 768px){
        #open-menu, #close-menu {
            display: flex;
        }

        nav {
            width: 50%;
            position: fixed;
            inset: 3.4rem 0 auto 0;
            padding-block: var(--gap-5);

            margin-left: auto;
            align-items: center;
            row-gap: var(--gap-4);
            flex-direction: column;

            translate: 150% 0;
            transition: translate 200ms ease-in;
        }

        nav.show {
            translate: 0 0;
        }
    }
    /************* Header Section *************/

    /************* Hero Section *************/
    .hero-section .wrapper {
        isolation: isolate;
        place-items: center;
        place-content: center;
        padding-block: var(--gap-2) var(--gap-4);

        .hero-section-btn {
            display: flex;
            gap: var(--gap-1);
        }

        .swiper {
            width: 100%;
            
            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    @media(width < 768px){
        .swiper img {
            aspect-ratio: 3 / 5;
        }
    }

    @media(width > 768px){
        .swiper img {
            aspect-ratio: 16 / 9;
        }
    }

    .hero-alt-section .wrapper {
        display: grid;
        gap: var(--gap-4);
        align-items: center;
        padding-block: var(--gap-4) var(--gap-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    }
    /************* Hero Section *************/

    /************* Stats Section *************/
    .stat-list {
        display: grid;
        gap: var(--gap-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

        li {
            display: grid;
            gap: var(--gap-1);
            place-items: center;
            place-content: center;
            padding: var(--padding-4) var(--padding-3);
        }
    }
    /************* Stats Section *************/

    /************* Problem Section *************/
    .problem-section .wrapper {
        display: grid;
        gap: var(--gap-4);
        align-items: center;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    }

    .problem-content-list {
        display: grid;
        gap: var(--gap-3);


        li {
            display: grid;
            gap: var(--gap-0);
        }
    }

    @media (width < 768px){
        .problem-section .img-wrapper {
            order: 1;
        }

        .problem-content {
            order: 2;
        }
    }
    /************* Problem Section *************/

    /************* How Section *************/
    .how-section .wrapper {
        display: grid;
        gap: var(--gap-4);
        align-items: center;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    }

    .how-content-list {
        display: grid;
        gap: var(--gap-3);


        li {
            display: grid;
            gap: var(--gap-0);
        }
    }
    /************* How Section *************/

    /************* Feature Section *************/
    .feature-list {
        display: grid;
        gap: var(--gap-4);
        grid-template-rows: auto 1fr;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        
        li {
            display: grid;
            grid-row: span 2;
            row-gap: var(--gap-0);
            grid-template-rows: subgrid;
            padding: var(--padding-4) var(--padding-3);
        }
    }
    /************* Feature Section *************/

    /************* CTA Section *************/
    .cta-section .wrapper {
        display: grid;
        gap: var(--gap-2);
        place-items: center;
        place-content: center;
    }
    /************* CTA Section *************/


    /************* About Pages Section *************/
    :is(.about-section, .vision-section) .wrapper {
        display: grid;
        gap: var(--gap-4);
        align-items: center;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    }
    /************* About Pages Section *************/


    /************* Solution Section *************/
    .solution-section .wrapper {
        display: grid;
        gap: var(--gap-4);
        align-items: center;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    }
    /************* Solution Section *************/

    /************* Pricing Section *************/
    .prices {
        display: grid;
        gap: var(--gap-4);
        grid-template-rows: auto 1fr;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        

        .price {
            display: flex;
            gap: var(--gap-4);
            flex-direction: column;
            justify-content: space-between;
            padding: var(--padding-4) var(--padding-3);

            .price-btn {
                display: flex;
                justify-content: center;
            }
        }

        ul {
            display: grid;
            gap: var(--gap-1);

            li {
                display: flex;
                gap: var(--gap-0);
                align-items: center;
            }
        }
    }
    /************* Pricing Section *************/


    /************* Gallery Section *************/
    .gallery-list.show {
        display: grid;
        gap: var(--gap-5);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

        video {
            aspect-ratio: 16/9;
        }
    }

    .gallery-tabs {
        display: flex;
        gap: var(--gap-1);
        justify-content: center;

        .tab-btn {
            padding: var(--padding-1) var(--padding-2);
        }
    }

    .gallery-list {
        display: none;
    }
    /************* Gallery Section *************/

    /************* Ressources Section *************/
    .ressources-list {
        display: flex;
        gap: var(--gap-0);
        flex-direction: column;
        justify-content: center;

        list-style-position: inside;
        list-style-type: upper-roman;
    }
    /************* Ressources Section *************/

    /************* Footer Section *************/
    footer {
        margin-top: var(--gap-9);
    }

    footer .wrapper {
        display: grid;
        gap: var(--gap-4);
        grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));

        .footer-paragraph {
            display: grid;
            gap: var(--gap-0);
        }

        .social-links {
            display: flex;
            gap: var(--gap-0);
            align-items: center;
        }
        
        .form-footer {
            display: flex;
            gap: var(--gap-0);

            input {
                max-width: 75%;
            }
        }
    }
    /************* Footer Section *************/
}

@layer utilities {
    /****************************************** STRUCTURE**************************/
    .flow > * + * {
        margin-top: var(--gap-2);
    }

    .flow-xs > * + * {
        margin-top: var(--gap-0);
    }

    .flow-sm > * + * {
        margin-top: var(--gap-1);
    }

    .flow-md > * + * {
        margin-top: var(--gap-3);
    }

    .flow-lg > * + * {
        margin-top: var(--gap-4);
    }

    .flow-xl > * + * {
        margin-top: var(--gap-6);
    }


    .wrapper {
        margin-inline: auto;
        padding-inline: var(--padding-2);
        width: min(100% - var(--padding-3), 1080px);
    }
    /*********************** STRUCTURE**************************/


    /*********************** TYPOGRAPHY**************************/
    .text {
        font-size: var(--fs-300);
    }

    .text-xs {
        font-size: var(--fs-100);
    }

    .text-xm {
        font-size: calc((var(--fs-100) + var(--fs-200)) / 2);
    }

    .text-sm {
        font-size: var(--fs-200);
    }

    .text-xd {
        font-size: calc((var(--fs-200) + var(--fs-300)) / 2);
    }

    .text-md {
        font-size: var(--fs-400);
    }

    .text-lg {
        font-size: var(--fs-500);
    }

    .text-xl {
        font-size: var(--fs-600);
    }

    .text-2xl {
        font-size: var(--fs-700);
    }

    .text-3xl {
        font-size: var(--fs-800);
    }

    .text-lead {
        color: var(--text);
    }

    .text-muted {
        color: var(--text-muted);
    }

    .text-center {
        text-align: center;
    }

    .text-bold {
        font-weight: 600;
    }

    .text-bolder {
        font-weight: 600;
    }
    /*********************** TYPOGRAPHY**************************/

    /*********************** BUTTONS**************************/
    .btn, .btn-sm, .btn-lg {
        text-align: center;
        border-radius: .5rem;
        display: inline-block;

        @supports(corner-shape: squircle){
            border-radius: 2rem;
            corner-shape: squircle;
        }
    }

    .btn {
        padding: var(--padding-1) var(--padding-2);
        font-size: calc((var(--fs-100) + var(--fs-200)) / 2);
    }

    .btn-sm {
        font-size: var(--fs-100);
        padding: var(--padding-0) var(--padding-1);
    }

    .btn-lg {
        font-size: var(--fs-200);
        padding: var(--padding-2) var(--padding-3);
    }

    .btn-primary {
        color: var(--clr-black);
        background-color: var(--clr-primary);
        transition: background-color 0.3s, color 0.3s;

        * {
            color: var(--clr-black);
        }
    }    

    .btn-secondary {
        outline: 1px solid var(--text);
        transition: background-color 0.3s, color 0.3s;

        * {
            color: var(--clr-primary);
        }
    }

    .btn-secondary-alt {
        outline: 1px solid var(--text-alt);
        transition: background-color 0.3s, color 0.3s;

        * {
            color: var(--clr-primary);
        }
    }

    .btn-primary:hover, .btn-secondary:hover, .btn-secondary-alt:hover {
        outline: none;
        color: var(--clr-black);
        box-shadow: var(--shadow-light);
        background-color: var(--clr-accent);

        * {
            color: var(--clr-black);
        }
    }

    .link {
        color: var(--clr-primary);
        text-decoration: underline;
        text-underline-offset: 4px;
        transition: color 0.3s;
    }

    .link:hover {
        text-decoration: none;
        color: var(--clr-accent);
    }

    .accent {
        color: var(--clr-primary);
    }
    /*********************** BUTTONS**************************/
}