@font-face{font-family:Gilroy;src:url('Gilroy-Light.otf');font-weight:300;}
@font-face{font-family:GilroyBold;src:url('Gilroy-ExtraBold.otf');font-weight:800;}

:root{
    --blue:#1ABEF7;
    --orange:#FA6E36;
    --dark:#313131;

    /* Размер шрифта меню */
    --menu-font-size:14px;
}

body{margin:0;font-family:Gilroy,Arial,sans-serif;color:var(--dark);}
.container{max-width:1200px;margin:auto;padding:0 24px;}

.header{position:sticky;top:0;background:#fff;z-index:100;border-bottom:1px solid #eee;}
.nav{display:flex;justify-content:space-between;align-items:center;height:72px;}
.logo{height:32px;}
.menu{display:flex;align-items:center;gap:32px;}
.menu a{
    text-decoration:none;
    color:var(--dark);
    font-size:var(--menu-font-size);
}
.demo-btn{background:var(--orange);color:#fff!important;padding:12px 22px;border-radius:8px;}

.hero{background:var(--orange);min-height:58vh;display:flex;align-items:center;position:relative;}
.hero-content{
width:75vw;
max-width:1400px;
padding:120px 100px;
text-align:left;
}
.hero h1{
font-family:GilroyBold, Arial, sans-serif;
font-size: 64px;
width:75vw;
max-width:1400px;
margin:0;
color:#fff;
text-align:left;
line-height:1.05;
}
.hero p{
font-size:32px;
color:#fff;
width:75vw;
max-width:1000px;
text-align:left;
line-height:1.4;
}

.why,.interface{padding:100px 0;}
.why h2,.team h2,.interface h2{text-align:center;font-size:48px;}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.card{
padding:36px;
border-radius:18px;
border:1px solid #e5e7eb;
box-shadow:0 8px 30px rgba(0,0,0,.04);
transition:all .25s ease;
background:#fff;
}
.card:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(0,0,0,.10);
border-color:#1ABEF7;
}
.icon{
    width:80px;
    height:80px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;

    background:var(--orange);
    color:#fff;
}

.icon svg{
    width:45px;
    height:45px;

    stroke:currentColor;
    stroke-width:1.8;
    fill:none;
}

.icon.orange{
    background:var(--orange);
}

.icon.blue{
    background:var(--blue);
}

.icon img{
    width: 45px;
    height:45px;
    object-fit:contain;
    display:block;
}

.card h3{margin-top:20px;}

.team{background:var(--blue);padding:100px 0;}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.kpi{background:#fff;padding:30px;border-radius:18px;text-align:center;}
.kpi strong{display:block;font-size:54px;}
.team-text{text-align:center;max-width:900px;margin:40px auto 0;font-size:24px;line-height:1.6;}

.placeholder{
    min-height:700px;
    height:70vh;
    max-height:1000px;

    border:3px dashed #ccc;
    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery{
    max-width:1200px;
    margin:0 auto;
}

.gallery-main img{
    width:100%;
    display:block;
    border-radius:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.gallery-thumbs{
    display:flex;
    gap:16px;
    justify-content:center;
    margin-top:24px;
}

.thumb{
    width:160px;
    height:90px;

    object-fit:cover;

    cursor:pointer;
    border-radius:12px;
    border:2px solid transparent;
    transition:.2s;

    flex:none;
}

.thumb:hover{
    transform:translateY(-2px);
    border-color:#1ABEF7;
}