* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Rubik', sans-serif;
    color:white;
    min-height: 100vh;
    background-color:#000;
    overflow: hidden;
}

.background-fixed {
    position:fixed;
    top:0; left:0;
    width:100vw; height:100vh;
    background-image:url("background.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index:-2;
}
.background-fixed:after {
    content:""; position:absolute; width:100%; height:100%;
    background:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4));
}

.main-wrapper { position: relative; width: 100vw; height: 100vh; }

.logo-container { width: 100%; display: flex; justify-content: center; padding-top: 20px; z-index: 10; position: relative; }
.logo {
    width:280px;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)) drop-shadow(0 0 20px rgba(100,160,255,0.6));
    transition: 0.4s ease;
}
.logo:hover { transform: scale(1.05); }

/* ПК ПОЗИЦИИ */
.nav-group-left, .nav-group-right {
    position: absolute;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 320px;
    z-index: 15;
}
.nav-group-left { left: 40px; }
.nav-group-right { right: 40px; }

.oval-btn {
    display:flex; justify-content:center; align-items:center;
    padding:14px 32px; background:rgba(50,80,180,0.85);
    border-radius:40px; backdrop-filter:blur(6px);
    text-decoration:none; color:white; font-size:14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    transition: 0.3s ease;
    cursor: pointer; /* Гарантированный палец */
}
.oval-btn:hover { transform: translateY(-3px); background: rgba(60,90,200,0.9); }
.oval-btn i { margin-right: 15px; font-size: 16px; pointer-events: none; } /* Чтобы иконка не мешала клику */

.calc-btn-wrapper { position: absolute; top: 250px; width: 100%; display: flex; justify-content: center; z-index: 10; }
.calc-btn {
    display:inline-block; padding:18px 45px; font-size:20px;
    background: linear-gradient(145deg, #1e3593, #2745b6);
    color:white; border-radius:40px; text-decoration:none;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    transition: 0.3s ease;
}
.calc-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
.calc-btn i { margin-right: 15px; }

.contact-box {
    margin-top:20px; padding:20px; border-radius:15px;
    background:rgba(255,255,255,0.08); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.1);
    display:flex; flex-direction:column; align-items:center; gap:15px; width: 100%;
}
.contact-icons { display:flex; gap:30px; align-items: center; }
.contact-icons a { font-size:42px; color:white; text-decoration:none; transition:0.3s; }
.contact-box .fa-telegram, .modal-icons .fa-telegram { color: #2AABEE !important; }
.contact-box .fa-whatsapp, .modal-icons .fa-whatsapp { color: #25D366 !important; }
.contact-box .fa-youtube { color: #FF0000 !important; }
.contact-box .fa-vk { color: #0077FF !important; }
.messenger-icon { width:42px; height:42px; object-fit:contain; }

.carousel-container { position:absolute; bottom: 15px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.carousel { background:rgba(0,0,0,0.6); backdrop-filter:blur(12px); border-radius:20px; padding:20px; width: 90%; max-width: 750px; }
.slide { display:none; align-items:center; justify-content: center; gap:20px; }
.slide.active { display:flex; }
.slide i { 
    font-size: 55px; 
    color: #66a6ff; 
}
.dots-container { display: flex; justify-content: center; width: 100%; margin-top: 10px; }
.dot { height: 8px; width: 8px; background: #bbb; border-radius: 50%; display: inline-block; margin: 0 5px; cursor: pointer; }
.dot.active { background: #66a6ff; }

/* МОДАЛКА */
.modal { display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); justify-content:center; align-items:center; }
.modal-content { background:rgba(25,25,25,0.9); backdrop-filter:blur(15px); padding:40px; border-radius:20px; text-align:center; position:relative; width:90%; max-width:500px; border: 1px solid rgba(255,255,255,0.1); }
.modal-close { position:absolute; top:10px; right:15px; font-size:30px; color:white; cursor:pointer; }
.modal-icons { display:flex; justify-content:center; gap:30px; margin-top:20px; align-items: center; }
.modal-icons a { font-size:48px; text-decoration:none; } /* Крупные иконки в модалке */

.mobile-spacer-large, .mobile-spacer-small { display: none; }

@media (max-width: 1100px) {
    body { overflow-y: auto; height: auto; }
    .background-fixed { background-image:url("background_mobile.png") !important; }
    .main-wrapper { height: auto; display: flex; flex-direction: column; align-items: center; width: 100%; }
    .logo-container { position: relative; order: 1; padding-top: 30px; }
    .nav-group-left { position: relative; top: 0; left: 0; order: 2; width: 90%; margin: 10px auto; }
    .mobile-spacer-large { display: block; height: 180px; order: 3; } 
    .calc-btn-wrapper { position: relative; top: 0; left: 0; order: 4; width: 90%; margin: 10px auto; }
    .nav-group-right { position: relative; top: 0; right: 0; order: 5; width: 90%; margin: 10px auto; }
    .mobile-spacer-small { display: block; height: 40px; order: 6; }
    .carousel-container { position: relative; bottom: 0; margin: 30px auto; order: 7; width: 90%; }
    .oval-btn, .calc-btn { width: 100%; }
}

.fade { opacity:0; transform:translateY(20px); animation:fade 1s forwards; }
@keyframes fade { to { opacity:1; transform:translateY(0); } }