@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap');
@font-face { font-family: 'Calibri-Bold'; src: url('../fonts/Calibri-Bold.eot'); src: url('../fonts/Calibri-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Calibri-Bold.woff') format('woff'), url('../fonts/Calibri-Bold.ttf') format('truetype'), url('../fonts/Calibri-Bold.svg#Calibri-Bold') format('svg'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Calibri-Regular'; src: url('../fonts/Calibri-Regular.eot'); src: url('../fonts/Calibri-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Calibri-Regular.woff') format('woff'), url('../fonts/Calibri-Regular.ttf') format('truetype'), url('../fonts/Calibri-Regular.svg#Calibri') format('svg'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Calibri-Light'; src: url('../fonts/Calibri-Light.eot'); src: url('../fonts/Calibri-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Calibri-Light.woff') format('woff'), url('../fonts/Calibri-Light.ttf') format('truetype'), url('../fonts/Calibri-Light.svg#Calibri-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Daytona'; src: url('../fonts/DaytonaW01-Bold.eot'); src: url('../fonts/DaytonaW01-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/DaytonaW01-Bold.woff2') format('woff2'), url('../fonts/DaytonaW01-Bold.woff') format('woff'), url('../fonts/DaytonaW01-Bold.ttf') format('truetype'), url('../fonts/DaytonaW01-Bold.svg#Daytona') format('svg'); font-style: normal; font-display: swap; }

 :root{
    --blue:#00019d;
    --turquoise:#1affd1;
    --brown:#462326;
    --pink:#fcc6fc;
    --lavender:#d8c6f2;
    --sky:#a9c9ee
}
 *{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:#fff;
    color:var(--brown);
    font-family:'Calibri-Regular';
    font-size:16px;
    line-height:1.45
}
a{
    color:inherit;
    text-decoration:none
}
button,input{
    font:inherit
}
 .site-header{
    position:sticky;
    top:0;
    z-index:1000;
    height:74px;
    background:#fff;
    border-bottom:1px solid var(--turquoise)
}
.navbar{
    height:100%;
    padding:0 52px;
    display:flex;
    align-items:center;
    gap:44px
}
.brand{
    flex:0 0 104px;
    width:104px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:flex-start
}
.brand img{
    width:104px;
    height:auto;
    max-height:48px;
    object-fit:contain
}
.nav-list{
    height:100%;
    flex:1;
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-width:0
}
.nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    height:100%;
    color:var(--blue);
    font-weight:700;
    font-size:16px;
    white-space:nowrap;
    padding:0 4px;
    font-family: 'Calibri-Bold';
}
.nav-link:hover,.nav-link.active{
    color:var(--turquoise)
}
/* .nav-link.active:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-1px;
    width:15px;
    height:15px;
    background:#fff;
    border-left:3px solid var(--blue);
    border-top:3px solid var(--blue);
    transform:translateX(-50%) rotate(45deg)
} */
 .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 520px 360px;
    min-height:390px
}
.hero-copy{
    padding:30px 35px 35px 54px;
    display:flex;
    align-items:center
}
.hero-copy-inner{
    max-width:610px
}
.hero-title{
    margin:0 0 24px;
    color:var(--brown);
    font-family:'Daytona';
    font-size:clamp(38px,3.4vw,58px);
    line-height:1.04
}
.hero-text{
    max-width:620px;
    margin:0;
    /* font-size:16px;
    font-weight:600;
    line-height:1.55 */
}
.hero-actions{
    display:flex;
    gap:16px;
    margin-top:30px;
    flex-wrap:wrap
}
.btn{
    min-width:195px;
    min-height:45px;
    padding:10px 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    font-weight:700;
    cursor:pointer
}
.btn-primary{
    color:#fff;
    background:linear-gradient(90deg,var(--pink),var(--lavender),var(--sky))
}
.btn-outline{
    color:var(--blue);
    background:#fff;
    border:1px solid var(--turquoise)
}
 .hero-image{
    min-height:390px;
    overflow:hidden;
    background:#dce8e5
}
.hero-image img{
    width:100%;
    height:100%;
    min-height:390px;
    object-fit:cover;
    object-position:center
}
 .login-panel{
    position:relative;
    min-height:390px;
    padding:28px;
    color:#fff;
    background:radial-gradient(circle at 80% 15%,rgba(0,105,80,.3),transparent 28%),linear-gradient(135deg,#11191d,#05090c);
    overflow:hidden
}
.login-content{
    position:relative;
    z-index:2
}
.login-logo{
    width:185px;
    height:58px;
    display:flex;
    align-items:center;
    margin-bottom:2px
}
.login-logo img{
    width:185px;
    height:58px;
    object-fit:contain;
    object-position:left center
}
.login-title{
    margin:0 0 25px;
    color:#fff;
    font-family:'Daytona';
    font-size:31px
}
.form-row{
    margin-bottom:14px
}
.form-label{
    display:block;
    margin-bottom:5px;
    color:#fff;
    font-size:13px
}
.form-input{
    width:100%;
    height:42px;
    padding:0 12px;
    border:1px solid #d5d5d5;
    border-radius:4px;
    outline:0;
    background:#fff;
    color:#222;
    font-size:14px
}
.form-input:focus{
    border-color:var(--turquoise)
}
.login-submit{
    width:100%;
    height:42px;
    margin-top:5px;
    border:0;
    border-radius:4px;
    color:#fff;
    background:linear-gradient(90deg,#e8b7eb,#c9c5ef,#8bb7ee);
    font-weight:700;
    cursor:pointer
}
.login-links{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:14px
}
.login-links a{
    color:#fff;
    font-size:13px;
    text-decoration:underline
}
 .section{
    padding:25px 52px;
    border-bottom:1px solid var(--turquoise)
}
.section-title{
    margin:0 0 15px;
    color:var(--brown);
    font-family:'Daytona';
    font-size:22px;
    line-height:1.15
}
.section p{
    margin:0 0 12px
}
.section ul{
    margin:0;
    padding-left:20px
}
.section li{
    margin-bottom:7px
}
.three-column{
    display:grid;
    grid-template-columns:1fr 1fr 1.35fr;
    gap:45px
}
.module-list{
    margin:0;
    padding:0!important;
    list-style:none
}
.module-item{
    display:grid;
    grid-template-columns:34px 45px 1fr;
    gap:8px;
    align-items:start;
    margin-bottom:8px
}
.module-icon{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:15px;
    font-weight:700
}
.module-name{
    padding-top:4px;
    color:var(--blue);
    font-weight:700
}
.module-description{
    padding-top:2px;
}
.module-lar .module-icon{
    background:#ff5141;
}
.module-icon img{
    width: 25px;
    filter: brightness(0) invert(1);
}
.module-se .module-icon img, .module-tal .module-icon img, .module-maal .module-icon img{
    width: 18px;
}
.module-maal .module-icon img{
    margin-bottom: 2px;
    margin-left: 2px;
}
.module-mig .module-icon img{
    width: 14px;   
}
.module-mod .module-icon{
    background:#ffbfff;
}
.module-leg .module-icon{
    background:#ffd139;
}
.module-maal .module-icon{
    background:#6d1331;
}
.module-se .module-icon{
    background:#00c16c;
}
.module-tal .module-icon{
    background:#975fcc;
}
.module-mig .module-icon{
    background:#00c1fa;
}
.two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px
}
.compliance-block h3,.cooperation-block h3,.about-block h3{
    margin:0 0 8px;
    color:var(--brown);
    /* font-size:15px */
}
.compliance-block p,.cooperation-block p,.about-block p{
    /* font-size:14px; */
    /* line-height:1.4 */
}
.horizon-note{
    margin-top:18px!important;
    font-style:italic
}
.footer{
    padding:12px 52px;
    color:var(--blue);
    background:#fff;
    text-align:center;
    font-size:13px;
    font-weight:700
}
 @media(max-width:1250px){
    .navbar{
        padding:0 28px;
        gap:24px
    }
    .brand{
        flex-basis:88px;
        width:88px
    }
    .brand img{
        width:88px
    }
    .nav-list{
        overflow-x:auto;
        justify-content:flex-start;
        padding-right:20px
    }
    .nav-link{
        font-size:14px
    }
    .hero{
        grid-template-columns:minmax(0,1fr) 450px 330px
    }
    .hero-copy{
        padding-left:40px
    }
}
 @media(max-width:1050px){
    .hero{
        grid-template-columns:minmax(0,1fr) 420px
    }
    .hero-image{
        grid-column:1;
        grid-row:1
    }
    .hero-copy{
        grid-column:1;
        grid-row:2
    }
    .login-panel{
        grid-column:2;
        grid-row:1/3
    }
    .three-column{
        grid-template-columns:1fr 1fr
    }
    .three-column>:last-child{
        grid-column:1/-1
    }
}
 @media(max-width:800px){
    .site-header{
        height:68px
    }
    .navbar{
        padding:0 20px;
        gap:18px
    }
    .brand{
        flex-basis:76px;
        width:76px
    }
    .brand img{
        width:76px
    }
    .nav-list{
        gap:12px
    }
    .hero{
        display:flex;
        flex-direction:column
    }
    .hero-image{
        order:1;
        min-height:340px
    }
    .hero-image img{
        min-height:340px
    }
    .hero-copy{
        order:2;
        padding:40px 25px
    }
    .login-panel{
        order:3;
        min-height:auto;
        padding:35px 25px
    }
    .three-column,.two-column{
        grid-template-columns:1fr;
        gap:25px
    }
    .section{
        padding:35px 25px
    }
    .footer{
        padding:15px 25px
    }
}
 @media(max-width:500px){
    .hero-title{
        font-size:37px
    }
    .hero-actions{
        flex-direction:column
    }
    .btn{
        width:100%
    }
    .login-links{
        flex-direction:column;
        gap:8px
    }
}