@charset "UTF-8";

@import url("reset.css?v1");
@import url("fonts.css");


:root{
    
    --app-height: 100vh;
    --headroom-height: auto;
    
  
    --c0: #F7F7F7; 
    --c1: #1F1132;
    --c2: #FFFFFF;
    --c3: #0166FF;
    --c4: rgba(31,17,50,.8);
    --c5: #00D6CE;
    
    --g1: linear-gradient(to right, var(--c5), var(--c3));
    
    --wr: 110rem;
    --awr: calc(-1 * var(--wr));
    
    --gap: 20rem;
    --sl: max(1px, 1rem);
    
    --br1: 0;

    --f-xs: max(12px, 14rem);
    --f-s: max(14px, 18rem);
    --f-d: max(14px, 20rem);
    --f-m: max(14px, 24rem);
    --f-b: max(14px, 32rem);
    --f-l: max(14px, 42rem);
    --f-xl: max(14px, 50rem);
    --f-xxl: max(14px, 70rem);
    
    --mw: 1920px; 
    
    
}


/* globals */

@media screen {

    html{font-size: 0.052vw;background-color: var(--c0);}

    .document{font-weight: 500;font-family: 'Montserrat', sans-serif;font-size: var(--f-d);line-height: 1.2;color: var(--c1);background-color: var(--c0);letter-spacing: normal;}
    
    .popup-active{}
    
    .wrapper{width: 100%;margin: 0 auto;padding: 0 var(--wr);max-width: var(--mw);}
    
    .preloader{background-color: var(--c0);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;visibility: hidden;opacity: 0;transition: all .25s 1s;display: flex;color: var(--c1);will-change: transform;}
     
    .loading{pointer-events: none;}
    .loading .preloader{transition-duration: 0s;opacity: 1;visibility: visible;}
    
    .icon{display: flex;max-height: 100%;align-items:center;justify-content:center;line-height: 0;max-width: 100%;width: auto;height: auto;}
    .cover,
    .contain{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-position: center;pointer-events: none;}
    .cover{object-fit: cover;}
    .contain{object-fit: contain;}
    .fill::after{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;}

    .button{display: inline-flex;justify-content: center;max-width: 100%;user-select: none;cursor: pointer;align-items: center;z-index: 1;position: relative;}
    .button:not(.fill){overflow: hidden;}
    .button-text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;position: relative;z-index: 2;min-width: 0;padding: 0 .1em;}
    
    .button__wide{width: 100%;}
     
    .title{line-height: 1.1;font-weight: 500;width: 100%;}
    .title__large{font-size: var(--f-xxl);letter-spacing: -.06em;}
    .title__default{font-size: var(--f-xl);letter-spacing: -.06em;}
    
    .subtitle{margin-top: 40rem;color: var(--c4);max-width: 580rem;}
    
    .container{display: flex;flex-direction: column;min-height: var(--app-height);}
    
    .header{margin-bottom: 90rem;}
    
    .topbar{display: grid;grid-template-columns: 1fr auto 1fr;grid-gap: 50rem;align-items: center;padding: 20rem 0;}
    .topbar-logo{max-width: 175rem;}
    .topbar-nav ul{display: grid;grid-auto-flow: column;grid-gap: 30rem;font-size: var(--f-s);font-weight: 500;}
    
    .main{margin-top: 0;flex: auto;display: flex;flex-direction: column;}
   
    .section{position: relative;z-index: 1;overflow-x: clip;padding-top: 200rem;}
    .section:first-child{padding-top: 0;}
    .section:only-child{flex: auto;}
    
    .section-header{display: flex;flex-direction: column;}
    
    .footer{overflow: hidden;margin-top: 200rem;padding-bottom: 50rem;}
    .footer-grid{background-image: var(--g1);background-color: var(--c3);color: var(--c2);margin: 0 -80rem;padding: 80rem 80rem 70rem;grid-template-columns: repeat(4, 1fr);grid-gap: 0 var(--gap);grid-template-areas: "f1 f1 . f2" "f3 f3 . ." "f4 f4 . .";display: grid;border-radius: 50rem;}
    .f1{grid-area: f1;max-width: 230rem;}
    .f2{grid-area: f2;display: flex;justify-content: center;font-size: var(--f-s);}
    .f2 ul{display: grid;grid-template-columns: auto;grid-gap: 1em;}
    .f3{grid-area: f3;margin-top: 60rem;font-size: var(--f-xs);font-weight: 400;}
    .f4{grid-area: f4;margin-top: 20rem;font-size: var(--f-xs);font-weight: 400;}
    
    
}

/* cards */

@media screen {
   
    .card{position: relative;overflow: hidden;display: flex;min-height: 100%;flex-direction: column;user-select: none;}
  
   
}

/* sections */

@media screen {
    
    .s1-2{text-align: center;max-width: 1320rem;margin: 0 auto;}
    .s1-3{margin-top: 100rem;display: flex;position: relative;overflow: hidden;border-radius: 60rem;}
    .s1-3::before{content: "";flex: none;width: 0;padding-top: 50%;}
    
    .s2-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);align-items: flex-start;}
    .s2-1-2{color: var(--c4);max-width: 650rem;}
    .s2-2{margin-top: 90rem;display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);counter-reset: index;}
    .s2-3{background-color: var(--c2);padding: 40rem;border-radius: 50rem;min-height: 420rem;}
    .s2-3::before{content: counter(index, decimal-leading-zero);counter-increment: index;margin-bottom: 80rem;width: max(64px, 72rem);height: max(64px, 72rem);border-radius: 50%;display: flex;align-items: center;justify-content: center;text-align: center;background-color: var(--c0);}
    .s2-3-1{max-width: 610rem;color: var(--c4);}
    .s2-3-1 a{color: var(--c3);text-decoration: underline;}
    
    .s3-1{text-align: center;}
    .s3-1 .subtitle{margin-left: auto;margin-right: auto;}
    .s3-2{display: grid;grid-template-columns: repeat(5, 1fr);grid-gap: 70rem var(--gap);}
    .s3-2:not(:first-child){margin-top: 100rem;}
    .s3-3-1{position: relative;overflow: hidden;width: 100%;display: flex;border-radius: 40rem;}
    .s3-3-1::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s3-3-2{margin-top: 1em;font-size: var(--f-m);letter-spacing: -.06em;font-weight: 500;}
   
}

@media screen and (max-width: 1023.98px) {
    
    :root{

        --wr: 16rem;

        --gap: 12rem;

        --f-xs: 12rem;
        --f-s: 14rem;
        --f-d: 14rem;
        --f-m: 14rem;
        --f-b: 20rem;
        --f-l: 20rem;
        --f-xl: 28rem;
        --f-xxl: 32rem;

        --mw: 680rem; 
        
    }
    
    html{font-size: 1px;}
    
    .desktop{display: none!important;}
    
    .subtitle{margin-top: 24rem;}
    
    .header{margin-bottom: 48rem;position: sticky;top: 0;background-color: var(--c0);z-index: 999;}
    .topbar{grid-template-columns: 1fr auto;padding: 16rem 0;position: relative;z-index: 2;}
    .topbar-logo{max-width: 124rem;position: relative;background-image: url(../img/mg-logo-white-2.svg);background-size: contain;background-position: center;background-repeat: no-repeat;}
    .topbar-logo img{transition: all .25s;}
    .topbar-nav{display: none;}
    
    .topbar-menu{position: relative;width: 56rem;height: 56rem;background-color: var(--c2);color: var(--c1);display: flex;align-items: center;justify-content: center;border-radius: 50%;z-index: 99;}
    .topbar-menu-inner{position: relative;color: currentColor;height: var(--sl);width: 24rem;}
    .topbar-menu-inner::before,
    .topbar-menu-inner::after{content: "";position: absolute;background-color: currentColor;height: 100%;width: 100%;left: 0;transition: all 0s;}
    .topbar-menu-inner::before{bottom: 4rem;}
    .topbar-menu-inner::after{top: 4rem;}
    
    .footer{padding-bottom: 0;}
    .footer-grid{margin: 0 var(--awr);padding: 32rem var(--wr);border-radius: 24rem 24rem 0 0;grid-template-columns: auto;grid-gap: 0;grid-template-areas: "f1" "f2" "f3" "f4";}
    .f1{max-width: 124rem;}
    .f2{justify-content: flex-start;margin-top: 72rem;}
    .f3{margin-top: 48rem;}
    .f4{margin-top: 24rem;}
    
    .section{padding-top: 100rem;}
    
    .s1-2{margin: 0;text-align: left;}
    .s1-3{margin-top: 40rem;border-radius: 24rem;}
    .s1-3::before{padding-top: 100%;}
    
    .s2-1{grid-template-columns: auto;grid-gap: 24rem;}
    .s2-2{margin-top: 48rem;grid-template-columns: auto;}
    .s2-3{border-radius: 24rem;padding: 24rem;min-height: 0;}
    .s2-3::before{width: 56rem;height: 56rem;}
    
    .s3-1{text-align: left;}
    .s3-2{grid-template-columns: repeat(3, minmax(0, 1fr));grid-gap: 24rem 16rem;}
    .s3-2:not(:first-child){margin-top: 48rem;}
    .s3-3-1{border-radius: 12rem;}
    
    .popup{position: absolute;top: 0;left: 0;width: 100%;z-index: 1;background-color: var(--c3);color: var(--c2);overflow: auto;display: flex;min-height: var(--app-height);transition: transform .25s;transform: translateY(-110%);}
    .popup-inner{display: flex;flex-direction: column;padding: var(--headroom-height) var(--wr) 32rem;transition: opacity .25s .25s;opacity: 0;}
    .popup-nav{margin-bottom: auto;flex: auto;padding: 48rem 0;}
    .popup-nav ul{display: grid;grid-template-columns: auto;grid-gap: var(--gap);font-size: var(--f-xxl);letter-spacing: -.06em;font-weight: 500;line-height: 1.1;}
    .popup-footer{font-size: var(--f-xs);opacity: .8;display: grid;grid-template-columns: auto;grid-gap: 48rem;}
    .popup-footer ul{display: grid;grid-template-columns: auto;grid-gap: 8rem;font-size: var(--f-d);}
    
    .popup-active{overflow: hidden;}
    .popup-active .header .popup{transform: translateY(0);}
    .popup-active .header .popup-inner{opacity: 1;}
    .popup-active .topbar-menu-inner::before{bottom: 0;transform: rotate(-45deg);}
    .popup-active .topbar-menu-inner::after{top: 0;transform: rotate(45deg);}
    .popup-active .topbar-logo img{visibility: hidden;opacity: 0;}
    
    
}


@media screen and (min-width: 1024px) {
    
    .mobile{display: none!important;}
    
    .header{will-change: transform;transition: transform 1s 2.5s;position: relative;z-index: 999;}
    .header.init{top: calc(-1 * var(--headroom-height));transition: top .25s ease;position: sticky;background-color: var(--c0);}
    .header.active{top: 0;}
    
    
}

@media screen and (min-width: 1920px) {
    
    
    html{font-size: 1px;}
    
    
}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
   
    .topbar-nav a{transition: opacity .25s;}
    .topbar-nav a:hover{opacity: .5;}
    
}