:root{--primary:#4A90E2;--secondary:#E65C00;--bg-light:#F8F9FA;--text-dark:#212529;--text-muted:#6C757D;--border:#E9ECEF;--white:#FFFFFF;--shadow:0 4px 12px rgba(0,0,0,0.08);--radius:8px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Open Sans',system-ui,sans-serif;color:var(--text-dark);line-height:1.5;background:var(--white)}
.btn{display:inline-block;padding:12px 24px;border-radius:var(--radius);border:none;font-weight:600;font-size:1rem;cursor:pointer;transition:opacity 0.3s,transform 0.1s;text-decoration:none;text-align:center}
.btn--primary{background:var(--secondary);color:var(--white)}
.btn--secondary{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn--secondary:hover{background:rgba(74,144,226,0.1)}
.btn:hover{opacity:0.9;transform:scale(1.02)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.header{background:var(--white);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}
.header__container{display:flex;justify-content:space-between;align-items:center;height:70px}
.header__logo{display:flex;align-items:center;text-decoration:none}
.header__logo img{max-height:50px;width:auto;display:block}
.header__contacts{display:flex;align-items:center;gap:20px}
.header__phone{color:var(--text-dark);text-decoration:none;font-weight:600}
.header__callback{padding:8px 16px;font-size:0.9rem}
.header__burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px}
.header__burger span{width:25px;height:3px;background:var(--text-dark);border-radius:3px}
.header__nav ul{display:flex;list-style:none;gap:20px}
.header__nav a{text-decoration:none;color:var(--text-dark);font-weight:500}
.header__nav a.active{color:var(--primary);border-bottom:2px solid var(--primary)}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}
img{max-width:100%;height:auto;display:block}
.hero{display:flex;align-items:center;justify-content:center;text-align:center;min-height:300px;background-size:cover;background-position:center;background-repeat:no-repeat}
.hero .container{width:100%}
.hero h1{font-size:2.5rem;margin-bottom:20px;color:white}
.hero p{font-size:1.2rem;max-width:700px;margin:0 auto;color:white}
.section-title{font-size:2rem;text-align:center;margin-bottom:1.5rem;color:var(--text-dark)}
.footer{background:#2c3e50;color:white;padding:40px 0 0}
.footer__container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}
.footer__logo{display:inline-block}
.footer__logo img{max-height:50px;width:auto;display:block}
.footer a{color:white;text-decoration:none}
.footer__nav ul{list-style:none}
.footer__nav li{margin-bottom:8px}
.footer__contacts a{display:block;margin-bottom:5px}
.footer__copyright{margin-top:40px;padding:15px 0;text-align:center;border-top:1px solid #456}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:200}
.modal.active{display:flex}
.modal__content{background:white;padding:30px;border-radius:var(--radius);max-width:400px;width:90%;position:relative;box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.modal__content h3{margin-bottom:20px;text-align:center;color:var(--primary)}
.modal__content form{display:flex;flex-direction:column;gap:15px}
.modal__content input[type=text],.modal__content input[type=tel]{padding:12px;border:1px solid var(--border);border-radius:var(--radius);font-size:1rem;width:100%}
.modal__content input:focus{outline:none;border-color:var(--primary)}
.modal__content .checkbox{margin:5px 0;font-size:0.9rem}
.modal__content .btn{margin-top:10px}
.modal__close{position:absolute;top:10px;right:15px;font-size:1.5rem;cursor:pointer}
.cta{padding:60px 0;text-align:center}
.cta__form{max-width:400px;margin:30px auto 0;display:flex;flex-direction:column;gap:15px}
.cta__form input,.cta__form textarea{padding:12px;border:1px solid var(--border);border-radius:var(--radius);font-size:1rem;width:100%}
.checkbox{display:flex;align-items:center;gap:8px;font-size:0.9rem}
.form-note{text-align:center;margin-top:15px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.header__phone-icon{display:none;background:transparent;border:2px solid var(--primary);border-radius:var(--radius);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;transition:background 0.3s;color:var(--primary);font-size:22px;animation:gentle-shake 2s infinite ease-in-out}
.header__phone-icon:hover,.header__phone-icon:focus{background:rgba(74,144,226,0.1);outline:none}
.hero__image img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.portfolio__item{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);display:block;text-decoration:none}
.portfolio__item img{width:100%;height:auto;transition:transform 0.3s;display:block}
.portfolio__item:hover img{transform:scale(1.05)}
.portfolio__item span{position:absolute;bottom:0;left:0;width:100%;background:rgba(230,92,0,0.8);color:white;padding:8px;text-align:center;font-size:0.9rem}
@keyframes gentle-shake{0%{transform:rotate(0deg)}5%{transform:rotate(10deg)}10%{transform:rotate(-10deg)}15%{transform:rotate(5deg)}20%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}

/* === НОВЫЕ СТИЛИ ДЛЯ ФОРМАТИРОВАНИЯ ТЕКСТА И УМЕНЬШЕНИЯ ИЗОБРАЖЕНИЙ === */
.content-section {
    padding: 40px 0;
}
.content-section p,
.content-section ul,
.content-section .intro-text {
    margin-bottom: 1.25rem;
    line-height: 1.6;
    font-size: 1rem;
}
.content-section h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--primary);
    font-size: 1.8rem;
}
.content-section ul {
    padding-left: 1.5rem;
}
.content-section li {
    margin-bottom: 0.5rem;
}
.features-list-compact {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.features-list-compact li {
    margin-bottom: 0;
    background: var(--bg-light);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
}
.two-columns-grid .portfolio__item {
    max-width: 100%;
    margin-bottom: 1rem;
}
.two-columns-grid .portfolio__item img {
    max-width: 100%;
    height: auto;
}

/* === ВОССТАНОВЛЕНИЕ ЦВЕТОВ НА ГЛАВНОЙ СТРАНИЦЕ === */
.hero-main .hero__title {
    color: var(--primary);
}
.hero-main .hero__subtitle {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .two-columns-grid .portfolio__item img {
        width: 100%;
    }
}

@media (max-width:768px){
    .header__contacts{display:none}
    .header__burger{display:flex}
    .header__nav{position:fixed;top:70px;left:0;width:100%;background:var(--white);transform:translateX(-100%);transition:transform 0.3s;padding:20px;box-shadow:var(--shadow);z-index:99}
    .header__nav.active{transform:translateX(0)}
    .header__nav ul{flex-direction:column;align-items:center}
    .header__contacts{display:flex;align-items:center;gap:10px}
    .header__contacts .header__phone{font-size:14px;white-space:nowrap}
    .header__contacts .header__callback{display:none}
    .header__phone-icon{display:inline-flex}
    .header__container{justify-content:space-between}
    .hero h1{font-size:1.8rem}
    .content-section h2 { font-size: 1.5rem; }
}
@media (max-width:480px){
    body{font-size:14px}
    .container{padding:0 12px}
    .btn{padding:10px 16px;font-size:0.9rem}
    .section-title{font-size:1.6rem}
    .hero h1{font-size:1.6rem}
    .features-list-compact { grid-template-columns: 1fr; }
}