/*======================================================================

Status  : Foundation Stable


Phase 1
✓ Root Variables
✓ Reset
✓ Base
✓ Typography
✓ Containers
✓ Sections
✓ Grid
✓ Responsive
======================================================================*/


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

:root{

    
    --ms-bg:#0D1111;
    --ms-surface:#121818;
    --ms-surface-2:#171E1E;

    --ms-gold:#C5A572;
    --ms-gold-light:#D9BE90;

    --ms-white:#FFFFFF;

    --ms-text:#E1E1E1;
    --ms-text-soft:#C8C8C8;

    --ms-border:rgba(197,165,114,.18);

   
    --ms-shadow-sm:0 6px 18px rgba(0,0,0,.18);

    --ms-shadow:
        0 10px 30px rgba(0,0,0,.28);

    --ms-shadow-lg:
        0 24px 70px rgba(0,0,0,.45);

   

    --ms-font:
        "Inter",
        "Segoe UI",
        sans-serif;

    --ms-h1:56px;
    --ms-h2:44px;
    --ms-h3:28px;

    --ms-body:18px;
    --ms-small:14px;

   

    --ms-container:1280px;

    --ms-section:110px;

    --ms-gap-xs:10px;
    --ms-gap-sm:20px;
    --ms-gap-md:34px;
    --ms-gap-lg:60px;

    

    --ms-radius-sm:10px;
    --ms-radius-md:16px;
    --ms-radius-lg:24px;
    --ms-radius-pill:999px;


    --ms-speed:.25s;

}




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

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--ms-bg);
    color:var(--ms-text);

    font-family:var(--ms-font);

    font-size:var(--ms-body);

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;
    width:100%;
    height:auto;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    font:inherit;

}

ul{

    list-style:none;

}



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

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

    color:var(--ms-white);

    font-weight:700;

    line-height:1.15;

}

h1{

    font-size:var(--ms-h1);

}

h2{

    font-size:var(--ms-h2);

}

h3{

    font-size:var(--ms-h3);

}

p{

    color:var(--ms-text-soft);

}



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

.ms-container{

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

    margin-inline:auto;

}



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

.ms-section{

    padding-block:var(--ms-section);

}



/*======================================================================
 GRID
======================================================================*/

.ms-grid{

    display:grid;

    gap:var(--ms-gap-md);

}

.ms-grid-2{

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

}

.ms-grid-3{

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

}

.ms-grid-4{

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

}



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



@media (min-width:1400px){

    .ms-container{

        max-width:1320px;

    }

}



@media (max-width:1200px){

    .ms-container{

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

    }

}



@media (min-width:768px) and (max-width:1024px){

    h1{

        font-size:44px;

    }

    h2{

        font-size:36px;

    }

    h3{

        font-size:26px;

    }

    .ms-section{

        padding-block:80px;

    }

    .ms-grid-2{

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

    }

    .ms-grid-3{

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

    }

    .ms-grid-4{

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

    }

}



@media (max-width:767px){

    h1{

        font-size:40px;

    }

    h2{

        font-size:32px;

    }

    h3{

        font-size:24px;

    }

    .ms-section{

        padding-block:70px;

    }

    .ms-container{

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

    }

    .ms-grid-2,
    .ms-grid-3,
    .ms-grid-4{

        grid-template-columns:1fr;

    }

}