/* ВНЕШНИЙ CSS ФАЙЛ - НЕ КРИТИЧНЫЕ СТИЛИ */

/* ===== FEATURES SECTION ===== */
.features{padding:var(--space-4xl) var(--space-xl);max-width:1200px;margin:0 auto}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-xl)}
.feature-card{background:var(--bg-glass);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-2xl);text-align:center;transition:transform var(--transition-normal),background var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,var(--primary),transparent);animation:rotate 4s linear infinite;opacity:0;transition:opacity var(--transition-normal);will-change:transform}
.feature-card:hover::before{opacity:.1}
@keyframes rotate{0%{transform:rotate3d(0,0,1,0deg)}100%{transform:rotate3d(0,0,1,360deg)}}
.feature-card:hover{transform:translateY(-10px);background:var(--bg-glass-strong);box-shadow:var(--shadow-glass);border-color:var(--border-strong);will-change:transform}
.feature-icon{font-size:3rem;margin-bottom:var(--space-lg);filter:drop-shadow(0 0 10px var(--primary))}
.feature-title{font-size:1.4rem;font-weight:700;margin-bottom:var(--space-md);color:var(--text-primary)}
.feature-description{color:var(--text-secondary);font-size:1rem}

/* ===== SERVICES SECTION ===== */
.services{padding:var(--space-4xl) var(--space-xl);max-width:1400px;margin:0 auto}
.section-title{text-align:center;font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:var(--space-3xl);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-2xl)}
.service-card{background:var(--bg-glass);backdrop-filter:blur(30px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-2xl);transition:transform var(--transition-normal),background var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal);position:relative;overflow:hidden;transform-style:preserve-3d}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-normal);will-change:transform}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover{transform:translate3d(0,-15px,0) rotateX(5deg);background:var(--bg-glass-strong);box-shadow:0 25px 50px rgba(0,0,0,.5);border-color:var(--border-strong)}
.service-header{text-align:center;margin-bottom:var(--space-xl)}
.service-icon{width:80px;height:80px;margin:0 auto var(--space-lg);background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;box-shadow:var(--shadow-neon)}
.service-title{font-size:1.6rem;font-weight:800;margin-bottom:var(--space-sm);color:var(--text-primary)}
.service-price{font-size:2.2rem;font-weight:900;color:var(--primary);margin-bottom:var(--space-md);text-shadow:0 0 10px var(--primary)}
.service-description{color:var(--text-secondary);margin-bottom:var(--space-xl);font-size:1rem;text-align:center}
.service-features{list-style:none;margin-bottom:var(--space-xl)}
.service-features li{color:var(--text-secondary);margin-bottom:var(--space-sm);position:relative;padding-left:2rem;font-size:.95rem}
.service-features li::before{content:'✓';position:absolute;left:0;color:var(--primary);font-weight:700;font-size:1.1rem}
.select-service{background:transparent;border:2px solid var(--primary);color:var(--primary);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-full);font-weight:700;cursor:pointer;transition:all var(--transition-normal);width:100%;font-size:1rem;text-transform:uppercase;letter-spacing:1px}
.select-service:hover{background:var(--primary);color:var(--bg-dark);transform:scale(1.05);box-shadow:0 10px 25px rgba(0,245,255,.4)}

/* ===== MODAL STYLES ===== */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-modal);backdrop-filter:blur(15px);z-index:2000;animation:fadeIn var(--transition-normal) ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-glass-strong);backdrop-filter:blur(40px);border:1px solid var(--border-strong);border-radius:var(--radius-xl);padding:var(--space-2xl);width:95%;max-width:600px;max-height:90vh;overflow-y:auto;animation:slideIn .4s ease;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--primary) rgba(255,255,255,.05)}
@keyframes slideIn{from{opacity:0;transform:translate(-50%,-60%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl)}
.modal-title{font-size:1.6rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.close-btn{background:0 0;border:none;color:var(--text-secondary);font-size:1.8rem;cursor:pointer;padding:var(--space-sm);border-radius:50%;transition:all var(--transition-normal);width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.close-btn:hover{background:var(--bg-glass);color:var(--text-primary);transform:rotate(90deg)}

/* ===== FORM STYLES ===== */
.form-group{margin-bottom:var(--space-lg)}
.form-label{display:block;margin-bottom:var(--space-sm);color:var(--text-primary);font-weight:600;font-size:.95rem}
.form-input,.form-textarea{width:100%;padding:var(--space-md);background:rgba(255,255,255,.1);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:1rem;font-family:inherit;transition:border-color var(--transition-normal),background var(--transition-normal),box-shadow var(--transition-normal)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}
.form-input:focus,.form-textarea:focus{outline:0;border-color:var(--primary);background:rgba(255,255,255,.15);box-shadow:0 0 0 3px rgba(0,245,255,.1)}
.checkbox-group{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}
.checkbox-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-normal),border-color var(--transition-normal)}
.checkbox-item:hover{background:rgba(255,255,255,.1);border-color:var(--primary)}
.checkbox-item input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--border);border-radius:4px;position:relative;cursor:pointer;transition:all var(--transition-normal)}
.checkbox-item input[type=checkbox]:checked{background:var(--primary);border-color:var(--primary)}
.checkbox-item input[type=checkbox]:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.submit-btn{width:100%;padding:var(--space-lg);background:var(--gradient-primary);border:none;border-radius:var(--radius-md);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform var(--transition-normal),box-shadow var(--transition-normal);text-transform:uppercase;letter-spacing:1px}
.submit-btn:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(0,245,255,.4)}

/* ===== SERVICE LIST STYLES ===== */
.service-list{display:grid;gap:var(--space-md)}
.service-item-wrapper{padding:var(--space-md);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--radius-md);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;transition:border-color var(--transition-normal),background var(--transition-normal)}
.service-item-wrapper:hover{border-color:var(--primary);background:rgba(255,255,255,.1)}
.service-name{font-weight:600;flex-grow:1}
.quantity-wrapper{margin-top:var(--space-sm);transition:opacity .3s ease,max-height .3s ease-out,visibility .3s;max-height:0;opacity:0;overflow:hidden;visibility:hidden}
.quantity-wrapper.visible{max-height:100px;opacity:1;visibility:visible}
.quantity-selector{display:flex;align-items:center;gap:var(--space-sm)}
.quantity-btn{background:rgba(255,255,255,.1);border:1px solid var(--border);color:var(--primary);width:36px;height:36px;border-radius:50%;font-size:1.5rem;font-weight:700;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);display:flex;align-items:center;justify-content:center;line-height:1}
.quantity-btn:hover{background:var(--primary);color:var(--bg-dark)}
.quantity-btn:disabled{opacity:.4;cursor:not-allowed}
.quantity-input{width:50px;height:36px;padding:var(--space-sm);background:transparent;border:none;color:var(--text-primary);text-align:center;font-size:1.2rem;font-weight:700;-moz-appearance:textfield}
.quantity-input::-webkit-outer-spin-button,.quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.extra-option-wrapper{width:100%;padding-top:var(--space-md);margin-top:var(--space-sm);border-top:1px solid var(--border);display:flex;justify-content:flex-end}
.checkbox-item-small{display:flex;align-items:center;gap:var(--space-sm);font-size:.9rem;cursor:pointer}
.checkbox-item-small input{accent-color:var(--primary)}

/* ===== FOOTER STYLES ===== */
.footer{background:var(--bg-darker);border-top:1px solid var(--border);padding:var(--space-3xl) var(--space-xl) var(--space-xl);margin-top:auto}
.footer-content{max-width:1200px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-2xl);margin-bottom:var(--space-2xl)}
.footer-section h3{font-size:1.3rem;font-weight:700;margin-bottom:var(--space-lg);color:var(--text-primary)}
.footer-section p,.footer-section li{color:var(--text-secondary);margin-bottom:var(--space-sm);line-height:1.6}
.footer-section ul{list-style:none}
.footer-section a{color:var(--text-secondary);text-decoration:none;transition:color var(--transition-normal)}
.footer-section a:hover{color:var(--primary)}
.contact-item{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.equipment-logos{display:flex;gap:var(--space-md);margin-top:var(--space-md);flex-wrap:wrap}
.equipment-logo{padding:var(--space-sm) var(--space-lg);background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);font-weight:700;color:var(--text-primary);transition:all var(--transition-normal)}
.equipment-logo:hover{background:var(--bg-glass-strong);border-color:var(--primary);color:var(--primary)}
.footer-bottom{border-top:1px solid var(--border);padding-top:var(--space-xl);text-align:center}
.footer-legal{color:var(--text-muted);font-size:.875rem;line-height:1.6}

/* ===== BEFORE/AFTER SECTION ===== */
.before-after{padding:var(--space-4xl) var(--space-xl);max-width:1200px;margin:0 auto}
.before-after-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-2xl);margin-bottom:var(--space-2xl)}
.before-after-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:transform var(--transition-normal),box-shadow var(--transition-normal);aspect-ratio:16/10;background-color:var(--bg-darker)}
.before-after-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-glass)}
.before-after-card img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:clip-path .5s cubic-bezier(.25,1,.5,1)}
.before-after-card img:first-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.before-after-card img:last-child{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
.before-after-card:hover img:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.before-after-card::before,.before-after-card::after{position:absolute;top:10px;padding:var(--space-xs) var(--space-sm);background-color:rgba(0,0,0,.7);color:#fff;font-weight:600;font-size:.8rem;border-radius:var(--radius-sm);z-index:2}
.before-after-card::before{content:'ПОСЛЕ';left:10px}
.before-after-card::after{content:'ДО';right:10px}
.section-note{text-align:center;color:var(--text-muted);font-style:italic;margin-top:var(--space-xl)}

/* ===== SCROLLBAR STYLES ===== */
.modal-content::-webkit-scrollbar{width:8px}
.modal-content::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:10px;margin:10px 0}
.modal-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:10px;transition:all var(--transition-normal);border:1px solid rgba(255,255,255,.1);opacity:0}
.modal-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,var(--primary-dark),var(--secondary));box-shadow:0 0 10px rgba(0,245,255,.3);transform:scaleX(1.2)}
.modal-content::-webkit-scrollbar-thumb:active{background:linear-gradient(135deg,var(--primary),var(--accent))}
.modal-content:hover::-webkit-scrollbar-thumb,.modal-content:focus-within::-webkit-scrollbar-thumb{opacity:1}

/* ===== ENHANCED MODAL CONTENT ===== */
.modal-content{padding-right:calc(var(--space-2xl) + 8px);background-image:linear-gradient(to bottom,var(--bg-glass-strong) 0%,transparent 30px),linear-gradient(to top,var(--bg-glass-strong) 0%,transparent 30px);background-repeat:no-repeat;background-size:100% 30px,100% 30px;background-position:0 0,0 100%;background-attachment:local,local}
.modal-content::before{content:'';position:sticky;top:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--primary) 20%,var(--secondary) 50%,var(--accent) 80%,transparent 100%);margin:0 calc(-1 * var(--space-2xl)) var(--space-md);opacity:0;transition:opacity var(--transition-normal);z-index:10}
.modal-content.scrolled::before{opacity:1}

/* ===== ANIMATIONS ===== */
@media (prefers-reduced-motion:no-preference){
.service-card,.feature-card{animation:fadeInUp .6s ease-out}
.service-card:nth-child(even){animation-delay:.1s}
.service-card:nth-child(3n){animation-delay:.2s}
}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width:768px){
.services{padding:var(--space-2xl) var(--space-md)}
.services-grid{grid-template-columns:1fr}
.checkbox-group{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr;gap:var(--space-xl)}
}

@media (max-width:480px){
.modal-content{width:98%;padding:var(--space-lg);padding-right:calc(var(--space-lg) + 6px);max-height:95vh}
.service-card{padding:var(--space-lg)}
.service-icon{width:60px;height:60px;font-size:1.5rem}
.service-price{font-size:1.8rem}
.modal-content::-webkit-scrollbar{width:6px}
}

@media (max-width:320px){
.modal-content{padding-right:var(--space-lg)}
.modal-content::-webkit-scrollbar{width:3px}
.modal-content::-webkit-scrollbar-track{background:transparent}
}

/* ===== CALCULATOR SECTION ===== */
.calculator-section {
    padding: var(--space-4xl) var(--space-xl);
    max-width: 900px;
    margin: 0 auto;
}

.calculator-card {
    background: var(--bg-glass-strong);
    backdrop-filter: blur(40px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
}

.calc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.calc-item label {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.calc-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.calc-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: none;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.calc-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-neon);
}

.calc-value {
    min-width: 40px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}

.calc-price {
    color: var(--text-secondary);
    font-size: 0.9rem;
    min-width: 80px;
    text-align: right;
}

.calc-total {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--border-strong);
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
}

.total-row span:first-child {
    font-size: 1.3rem;
    font-weight: 600;
}

.total-price {
    font-size: 2.5rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calc-note {
    text-align: center;
    color: var(--success);
    font-size: 0.9rem;
    margin-top: var(--space-md);
    font-weight: 600;
}

/* ===== PROCESS SECTION ===== */
.process-section {
    padding: var(--space-4xl) var(--space-xl);
    max-width: 1400px;
    margin: 0 auto;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2xl);
    position: relative;
}

.process-step {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: relative;
    transition: all var(--transition-normal);
}

.process-step:hover {
    transform: translateY(-10px);
    background: var(--bg-glass-strong);
    border-color: var(--primary);
    box-shadow: var(--shadow-glass);
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    color: white;
    box-shadow: var(--shadow-neon);
}

.step-icon {
    font-size: 3rem;
    margin: var(--space-lg) 0;
}

.process-step h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.process-step p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ===== PROMO SECTION ===== */
.promo-section {
    padding: var(--space-4xl) var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.promo-container {
    background: linear-gradient(135deg, rgba(0,245,255,0.1) 0%, rgba(99,102,241,0.1) 100%);
    border: 2px solid var(--primary);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    position: relative;
    overflow: hidden;
}

.promo-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, var(--primary), transparent);
    animation: rotate 8s linear infinite;
    opacity: 0.1;
}

.promo-content {
    position: relative;
    left: 50px;
    z-index: 1;
}

.promo-badge {
    display: inline-block;
    background: var(--gradient-accent);
    color: white;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: var(--space-lg);
    animation: pulse 2s ease-in-out infinite;
}

.promo-content h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: var(--space-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.promo-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

.promo-timer {
    margin: var(--space-xl) 0;
}

.timer-blocks {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-md);
}

.timer-block {
    background: var(--bg-glass-strong);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    min-width: 80px;
    text-align: center;
}

.timer-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary);
    text-shadow: 0 0 20px var(--primary);
}

.timer-label-small {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.timer-separator {
    font-size: 2rem;
    color: var(--primary);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.promo-visual {
    font-size: 15rem;
    text-align: center;
    opacity: 0.3;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* ===== CERTIFICATES SECTION ===== */
.certificates-section {
    padding: var(--space-4xl) var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-2xl);
}

.cert-card {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    transition: all var(--transition-normal);
}

.cert-card:hover {
    transform: translateY(-10px);
    background: var(--bg-glass-strong);
    border-color: var(--primary);
    box-shadow: var(--shadow-glass);
}

.cert-icon {
    font-size: 4rem;
    margin-bottom: var(--space-lg);
}

.cert-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.cert-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .promo-container {
        grid-template-columns: 1fr;
        padding: var(--space-2xl);
    }
    
    .promo-visual {
        font-size: 8rem;
    }
    
    .timer-blocks {
        flex-wrap: wrap;
    }
    
    .calc-item {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .calc-price {
        width: 100%;
        text-align: left;
    }
}