:root{--primary:#e63946;--dark:#0d1117;--dark2:#161b22;--dark3:#21262d;--light:#f0f6fc;--gray:#8b949e;--green:#2ea043;--blue:#58a6ff;--accent:#f4a261}
        *{margin:0;padding:0;box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--dark);color:var(--light);overflow-x:hidden}
        ::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--dark)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}
        
        /* NAVBAR */
        .navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(13,17,23,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--dark3);padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:70px}
        .nav-logo{font-size:24px;font-weight:700;color:var(--primary);text-decoration:none}
        .nav-links{display:flex;gap:30px;list-style:none}
        .nav-links a{color:var(--gray);text-decoration:none;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px;transition:0.3s}
        .nav-links a:hover{color:var(--primary)}
        .nav-right{display:flex;align-items:center;gap:16px}
	.nav-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--dark3); background: transparent; color: var(--light); cursor: pointer; font-size: 14px; transition: 0.3s; text-decoration: none; }
        .nav-btn:hover{border-color:var(--primary);color:var(--primary)}
        .nav-btn.primary{background:var(--primary);border-color:var(--primary);color:white}
        .nav-btn.primary:hover{background:#c1121f}
        
        /* SECTIONS */
        section{padding:80px 40px;position:relative}
        section:not(:last-child)::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--dark3),var(--primary),var(--dark3),transparent);opacity:0.5}
        .section-header{text-align:center;margin-bottom:50px}
        .section-header h2{font-size:36px;font-weight:700;margin-bottom:16px}
        .section-header h2 .hl{color:var(--primary)}
        .section-header p{color:var(--gray);font-size:18px}
        .section-line{width:60px;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));margin:20px auto 0;border-radius:2px}
        
        /* HERO */
        .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--dark),#1d3557);position:relative;overflow:hidden}
        .hero-content{position:relative;z-index:2;text-align:center;max-width:900px;padding:0 20px}
        .hero h1{font-size:clamp(32px,8vw,72px);font-weight:700;line-height:1;margin-bottom:20px}
        .hero h1 .hl{color:var(--primary)}
        .hero p{font-size:20px;color:var(--gray);max-width:600px;margin:0 auto 40px;line-height:1.6}
        .hero-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
        .btn{padding:14px 32px;border-radius:50px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;transition:0.3s;display:inline-flex;align-items:center;gap:10px}
        .btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:white;box-shadow:0 4px 20px rgba(230,57,70,0.4)}
        .btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(230,57,70,0.6)}
        .btn-outline{background:transparent;color:var(--light);border:2px solid var(--dark3)}
        .btn-outline:hover{border-color:var(--primary);color:var(--primary)}
        
        /* STATS */
        .stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--dark2);border-top:1px solid var(--dark3);border-bottom:1px solid var(--dark3)}
        .stat{padding:50px 30px;text-align:center;border-right:1px solid var(--dark3)}
        .stat:last-child{border-right:none}
        .stat-number{font-size:48px;font-weight:700;color:var(--primary);margin-bottom:8px}
        .stat-label{color:var(--gray);font-size:14px;text-transform:uppercase;letter-spacing:1px}
        
        /* SERVICES */
        .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1200px;margin:0 auto}
        .service-card{background:var(--dark2);border:1px solid var(--dark3);border-radius:16px;padding:40px 30px;text-align:center;transition:0.4s}
        .service-card:hover{transform:translateY(-8px);border-color:var(--primary)}
        .service-icon{width:70px;height:70px;margin:0 auto 20px;background:var(--dark3);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px}
        
        /* PRICE */
        .price-container{max-width:1000px;margin:0 auto}
        .price-tabs{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap;justify-content:center}
        .price-tab{padding:10px 24px;background:var(--dark3);border:1px solid var(--dark3);border-radius:50px;color:var(--gray);cursor:pointer;font-size:14px;font-weight:500;transition:0.3s}
        .price-tab.active,.price-tab:hover{background:var(--primary);color:white;border-color:var(--primary)}
        .price-table{width:100%;border-collapse:collapse;background:var(--dark);border-radius:16px;overflow:hidden}
        .price-table thead{background:var(--dark3)}
        .price-table th,.price-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--dark3);font-size:14px}
        .price-table th{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--gray)}
        .price-val{color:var(--accent);font-weight:700;font-size:16px}
        .price-table .category-row{background:rgba(230,57,70,0.1)}
        .price-table .category-row td{color:var(--primary);font-weight:700;font-size:15px}

/* Карточный вид для мобильных */
/* ===== КАРТОЧНЫЙ ВИД ДЛЯ МОБИЛЬНЫХ ===== */
@media (max-width: 600px) {
    .price-table thead {
        display: none;
    }
    
    .price-table,
    .price-table tbody,
    .price-table tr,
    .price-table td {
        display: block;
        width: 100%;
    }
    
    /* Карточка услуги */
    .price-table tr {
        margin-bottom: 16px;
        background: var(--dark2);
        border: 1px solid var(--dark3);
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    .price-table tr:last-child {
        margin-bottom: 0;
    }
    
    /* Название услуги (первая ячейка) */
    .price-table td:first-child {
        font-size: 16px;
        font-weight: 700;
        color: var(--light);
        margin-bottom: 12px;
        padding: 0 0 12px 0;
        border-bottom: 2px solid var(--dark3);
        text-align: left;
        white-space: normal;
    }
    
    .price-table td:first-child::before {
        display: none;
    }
    
    /* Остальные ячейки */
    .price-table td {
        padding: 8px 0;
        border: none;
        text-align: left;
        white-space: normal;
        color: var(--gray);
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }
    
    /* Подписи (data-label) */
    .price-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gray);
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.5px;
        flex-shrink: 0;
        min-width: 80px;
    }
    
    /* Значения ячеек */
    .price-table td:not(:first-child) {
        color: var(--light);
    }
    
    /* Цена — выделяем */
    .price-table td:last-child {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--dark3);
        font-size: 18px;
        font-weight: 700;
        color: var(--accent);
    }
    
    .price-table td:last-child::before {
        content: '💰';
        min-width: auto;
        font-size: 18px;
    }
    
    .price-val {
        font-size: 18px;
        font-weight: 700;
        color: var(--accent);
        text-align: right;
        flex: 1;
    }
    
    /* Категория (заголовок группы) */
    .price-table tr.category-row td {
        background: var(--dark3);
        color: var(--primary);
        font-weight: 700;
        font-size: 14px;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 12px;
        text-align: center;
    }
    
    .price-table tr.category-row td::before {
        display: none;
    }
}

/* Ещё меньше экраны */
@media (max-width: 400px) {
    .price-table td {
        font-size: 13px;
        flex-direction: column;
        gap: 4px;
    }
    
    .price-table td::before {
        font-size: 10px;
    }
    
    .price-val {
        font-size: 16px;
    }
}
        
        /* CONSTRUCTOR */
        .constructor-wrap{max-width:1200px;margin:0 auto}

.moto-box {
    background: var(--dark);
    border: 1px solid var(--dark3);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

.moto-box img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Адаптивность для мобильных */
@media (max-width: 900px) {
    .moto-box {
        min-height: 300px;
        padding: 15px;
    }
    .moto-box img {
        max-height: 350px;
    }
}

@media (max-width: 600px) {
    .moto-box {
        min-height: 250px;
        padding: 10px;
    }
    .moto-box img {
        max-height: 280px;
    }
    .hotspot {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    .hotspot-label {
        display: none; /* Скрываем подписи на мобильных */
    }
}



        .sidebar-box{background:var(--dark2);border:1px solid var(--dark3);border-radius:16px;padding:24px;position:sticky;top:90px}
        .sidebar-box h3{font-size:22px;margin-bottom:15px}
        .total-row{display:flex;justify-content:space-between;font-size:20px;font-weight:700;color:var(--primary);margin-top:15px;padding-top:15px;border-top:2px solid var(--dark3)}
        
        /* HOTSPOTS */
        @keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.15);opacity:0.8}}
        .hotspot{position:absolute;width:32px;height:32px;background:var(--primary);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:white;font-size:18px;font-weight:bold;transform:translate(-50%,-50%);animation:pulse 2s infinite;z-index:10;transition:background 0.3s}
        .hotspot:hover{background:var(--accent);transform:translate(-50%,-50%) scale(1.2)}
        .hotspot-label{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--dark);border:1px solid var(--dark3);border-radius:8px;padding:6px 12px;font-size:12px;white-space:nowrap;opacity:0;transition:opacity 0.3s;pointer-events:none}
        .hotspot:hover .hotspot-label{opacity:1}
        
        /* PARTS MODAL */
        .parts-modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:3000}
        .parts-modal.active{display:flex}
        .parts-modal-box{background:var(--dark2);border:1px solid var(--dark3);border-radius:16px;padding:24px;width:90%;max-width:450px;max-height:80vh;overflow-y:auto;animation:modalIn 0.3s ease}
        @keyframes modalIn{from{transform:scale(0.95) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
        .parts-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--dark3)}
        .parts-modal-header h3{font-size:20px}
        .parts-modal-close{background:none;border:none;color:var(--gray);font-size:24px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:0.3s}
        .parts-modal-close:hover{background:var(--dark3);color:var(--primary)}
        .parts-list{list-style:none}
        .part-item{padding:12px;background:var(--dark);border:1px solid var(--dark3);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:0.3s;display:flex;align-items:center;gap:12px}
        .part-item:hover{border-color:var(--primary);background:rgba(230,57,70,0.05)}
        .part-item.selected{border-color:var(--green);background:rgba(46,160,67,0.1)}
        .part-item.selected .part-check{background:var(--green);border-color:var(--green)}
        .part-item.selected .part-check::after{content:'✓';color:white;font-size:12px}
        .part-check{width:22px;height:22px;border:2px solid var(--dark3);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:0.3s}
        .part-info{flex:1}
        .part-name{font-size:14px;font-weight:500}
        .part-type{font-size:11px;color:var(--gray);margin-top:2px}
        .part-price{font-size:16px;font-weight:700;color:var(--accent);white-space:nowrap}
        .parts-modal-footer{margin-top:15px;padding-top:15px;border-top:1px solid var(--dark3);display:flex;justify-content:space-between;align-items:center}
        .parts-modal-total{font-size:14px;color:var(--gray)}
        .parts-modal-total span{color:var(--accent);font-weight:700;font-size:18px}
        .parts-modal-add{padding:10px 20px;background:var(--green);color:white;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:0.3s}
        .parts-modal-add:hover{opacity:0.8}
        .parts-modal-add:disabled{opacity:0.4;cursor:not-allowed}
        
        /* BOOKING */
        .booking-form{max-width:600px;margin:0 auto}
        .form-group{margin-bottom:20px}
        .form-group label{display:block;margin-bottom:8px;color:var(--gray);font-size:14px;font-weight:500}
        .form-input{width:100%;padding:14px 16px;background:var(--dark2);border:1px solid var(--dark3);border-radius:12px;color:var(--light);font-size:15px;transition:border-color 0.3s}
        .form-input:focus{outline:none;border-color:var(--primary)}
        .discount-info{display:none;padding:14px;background:rgba(46,160,67,0.15);border:1px solid var(--green);border-radius:10px;margin-bottom:20px;font-size:14px}
        .booking-success{display:none;text-align:center;padding:40px}
        .booking-success .check{width:80px;height:80px;margin:0 auto 20px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px}
        
        /* CONTACTS & FOOTER */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Фиксировано 3 колонки */
    gap: 30px;
    max-width: 1100px; /* Увеличено, чтобы карточки свободно помещались */
    width: 100%;
    margin: 0 auto;
}

/* Адаптивность */
@media (max-width: 900px) {
    .contacts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .contacts-grid { grid-template-columns: 1fr; }
}
        .contact-card{background:var(--dark2);border:1px solid var(--dark3);border-radius:16px;padding:30px;text-align:center}
        .contact-icon{font-size:36px;margin-bottom:15px}
        .footer{background:var(--dark2);border-top:1px solid var(--dark3);padding:40px;text-align:center}
        .footer p{color:var(--gray);font-size:14px}
        .footer a{color:var(--primary);text-decoration:none}
        
        /* LK MODAL */
        .modal{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:2000}
        .modal.active{display:flex}
        .modal-box{background:var(--dark2);border:1px solid var(--dark3);border-radius:16px;padding:30px;width:90%;max-width:420px;max-height:90vh;overflow-y:auto}
        .modal-box h3{margin-bottom:20px;font-size:24px}
        
        /* LK DASHBOARD */
        .lk-dashboard{display:none;position:fixed;inset:0;background:var(--dark);z-index:1500;overflow-y:auto;padding:90px 40px 40px}
        .lk-dashboard.active{display:block}
        .lk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;max-width:900px;margin-left:auto;margin-right:auto}
        .lk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:30px;max-width:900px;margin-left:auto;margin-right:auto}
        .stat-card{background:var(--dark2);border:1px solid var(--dark3);padding:20px;border-radius:12px}
        .stat-lbl{color:var(--gray);font-size:14px;margin-bottom:8px}
        .stat-val{font-size:24px;font-weight:700;color:var(--primary)}
        .lk-card{background:var(--dark2);border:1px solid var(--dark3);border-radius:16px;padding:24px;margin-bottom:20px;max-width:900px;margin-left:auto;margin-right:auto}
        table.lk-table{width:100%;border-collapse:collapse}
        table.lk-table th,table.lk-table td{padding:12px;text-align:left;border-bottom:1px solid var(--dark3);font-size:14px}
        table.lk-table th{color:var(--gray);font-size:12px;text-transform:uppercase}
        
        /* TOAST */
        .toast{padding:12px 20px;border-radius:10px;margin-bottom:10px;font-size:14px;color:white;animation:slideIn 0.3s;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
        .toast.ok{background:var(--green)}
        .toast.err{background:var(--primary)}
        @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
        
        /* RESPONSIVE */
        @media(max-width:900px){.constructor-wrap>div{grid-template-columns:1fr!important}.sidebar-box{position:static}}
        @media(max-width:768px){.grid-2{grid-template-columns:1fr}.nav-links{display:none}.stats{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:600px){section{padding:60px 20px}.navbar{padding:0 20px}.stats{grid-template-columns:1fr}.hero h1{font-size:36px}.lk-dashboard{padding:80px 20px 20px}}


/* Карта */
.map-container {
    margin-top: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#map {
    border: 2px solid var(--dark3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.map-info {
    margin-top: 15px;
    padding: 15px 20px;
    background: var(--dark2);
    border: 1px solid var(--dark3);
    border-radius: 12px;
    text-align: center;
}

.map-info p {
    margin: 5px 0;
    color: var(--light);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .map-container {
        margin-top: 30px;
    }
    
    #map {
        height: 300px !important;
    }
    
    .map-info {
        padding: 12px 15px;
    }
}

@media (max-width: 480px) {
    #map {
        height: 250px !important;
    }
}