/*==================================================
                    IMPORTS
==================================================*/

@import url("timeline.css");


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

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/*==================================================
                DESIGN SYSTEM
==================================================*/

:root{

    /* COLORS */

    --green:#15850F;

    --bg:#050505;

    --white:#FFFFFF;

    --gray-100:#F5F5F5;

    --gray-200:#E5E5E5;

    --gray-300:#CFCFCF;

    --gray-400:#BDBDBD;

    --gray-500:#8F8F8F;

    --gray-600:#666666;

    --border:rgba(255,255,255,.08);

    --border-strong:rgba(255,255,255,.15);

    --shadow-sm:0 10px 30px rgba(0,0,0,.20);

    --shadow-md:0 20px 60px rgba(0,0,0,.35);

    --shadow-lg:0 30px 80px rgba(0,0,0,.45);



    /* LAYOUT */

    --container:1360px;



    /* TYPOGRAPHY */

    --fs-display:clamp(2.6rem,5vw,4.5rem);

    --fs-h1:clamp(2rem,4vw,4rem);

    --fs-h2:clamp(1.8rem,3vw,3.2rem);

    --fs-h3:clamp(1.3rem,2vw,2rem);

    --fs-h4:clamp(1rem,1.3vw,1.2rem);

    --fs-body:clamp(1rem,1.35vw,1.15rem);

    --fs-small:clamp(.82rem,.9vw,.95rem);



    /* SPACING */

    --space-2xs:clamp(4px,.5vw,8px);

    --space-xs:clamp(8px,1vw,12px);

    --space-sm:clamp(12px,2vw,20px);

    --space-md:clamp(20px,3vw,40px);

    --space-lg:clamp(40px,6vw,80px);

    --space-xl:clamp(70px,8vw,120px);



    /* RADIUS */

    --radius-sm:6px;

    --radius-md:12px;

    --radius-lg:18px;

    --radius-xl:24px;



    /* TRANSITIONS */

    --transition:.35s ease;

}



/*==================================================
                    HTML
==================================================*/

html{

    scroll-behavior:smooth;

}



/*==================================================
                    BODY
==================================================*/

body{

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

    background:var(--bg);

    color:var(--white);

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}



/*==================================================
                GLOBAL MEDIA
==================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}



svg{

    display:block;

}



/*==================================================
                LINKS
==================================================*/

a{

    color:inherit;

    text-decoration:none;

}



/*==================================================
                CONTAINER
==================================================*/

.container{

    width:min(var(--container),100%);

    margin-inline:auto;

    padding-inline:clamp(40px,4vw,70px);

}



/*==================================================
            GLOBAL TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-weight:700;

    line-height:1.1;

    text-wrap:balance;

}



p{

    text-wrap:pretty;

}




/*==================================================
                SECTIONS
==================================================*/

.section{

    padding-block:var(--space-xl);

}



/*==================================================
                LAYOUT HELPERS
==================================================*/

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.grid-center{

    display:grid;

    place-items:center;

}

.stack{

    display:flex;

    flex-direction:column;

    gap:var(--space-md);

}

.cluster{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:var(--space-sm);

}



/*==================================================
                WIDTH HELPERS
==================================================*/

.w-100{

    width:100%;

}

.max-content{

    width:min-content;

}

.fit-content{

    width:fit-content;

}



/*==================================================
                TEXT HELPERS
==================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-green{

    color:var(--green);

}



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

.hidden{

    display:none !important;

}

.invisible{

    visibility:hidden;

}

.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}



/*==================================================
                BORDER RADIUS
==================================================*/

.radius-sm{

    border-radius:var(--radius-sm);

}

.radius-md{

    border-radius:var(--radius-md);

}

.radius-lg{

    border-radius:var(--radius-lg);

}



/*==================================================
                SHADOWS
==================================================*/

.shadow-sm{

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

}

.shadow-md{

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

}

.shadow-lg{

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

}



/*==================================================
                TRANSITIONS
==================================================*/

.transition{

    transition:var(--transition);

}



/*==================================================
                FOCUS
==================================================*/

:focus-visible{

    outline:2px solid var(--green);

    outline-offset:3px;

}



/*==================================================
        REDUCED MOTION
==================================================*/

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

    html{

        scroll-behavior:auto;

    }

    *,

    *::before,

    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}