*{margin:0;padding:0;box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f8fafc;min-height:100vh}
        .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
        
        /* Header */
        .header{background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);box-shadow:0 2px 15px rgba(0,0,0,0.1);position:fixed;top:0;left:0;right:0;z-index:1000;padding:0.8rem 0}
        .header__container{display:flex;justify-content:space-between;align-items:center;gap:1rem}
        .logo{font-size:1.3rem;font-weight:700;color:#0a2540;text-decoration:none}
        .phone-header{text-decoration:none;color:#0a2540;font-weight:700;font-size:1.1rem;white-space:nowrap}
        .btn{display:inline-block;padding:0.7rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:600;border:none;text-align:center;font-size:0.95rem;cursor:pointer;transition:all 0.3s}
        .btn--primary{background:#f97316;color:#fff}.btn--primary:hover{background:#ea580c;transform:translateY(-2px)}
        .btn--secondary{background:#fff;color:#0a2540;border:2px solid #fff}.btn--secondary:hover{background:transparent;color:#fff}
        .btn--urgent{background:#dc2626;color:#fff;font-size:0.9rem;padding:0.6rem 1.2rem;white-space:nowrap;animation:pulse 2s infinite}
        .btn--large{padding:1rem 2.5rem;font-size:1.1rem;border-radius:12px}
        @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0.7)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}
        .menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
        .menu-toggle span{width:28px;height:3px;background:#0a2540;border-radius:2px;transition:all 0.3s}
        .nav{display:flex;align-items:center;gap:1.5rem}
        .nav__list{display:flex;list-style:none;gap:1rem}
        .nav__link{text-decoration:none;color:#0a2540;font-weight:500;transition:color 0.3s}
        .nav__link:hover{color:#f97316}
        
        /* Hero - На весь экран! */
        .hero{
            min-height:100vh;
            background:linear-gradient(rgba(10,37,64,0.85),rgba(10,37,64,0.9)),url('images/gallery/roof-work-01.webp');
            background-size:cover;
            background-position:center;
            background-attachment:scroll;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            text-align:center;
            padding:6rem 0 4rem;
            position:relative
        }
        .hero__content{max-width:900px;padding:0 20px}
        .hero h1{
            color:#fff;
            font-size:clamp(2rem,5vw,3.5rem);
            line-height:1.2;
            margin-bottom:1.5rem;
            font-weight:800;
            text-shadow:2px 2px 4px rgba(0,0,0,0.3)
        }
        .hero__subtitle{
            font-size:clamp(1.1rem,2vw,1.4rem);
            margin-bottom:2rem;
            color:#e2e8f0;
            line-height:1.6
        }
        .hero__features{
            display:flex;
            justify-content:center;
            gap:2rem;
            margin:2rem 0;
            flex-wrap:wrap
        }
        .hero__feature{
            display:flex;
            align-items:center;
            gap:0.5rem;
            font-size:1rem;
            font-weight:500
        }
        .hero__feature-icon{font-size:1.5rem}
        .hero__cta{display:flex;gap:1rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
        .hero__scroll{
            position:absolute;
            bottom:2rem;
            left:50%;
            transform:translateX(-50%);
            color:#fff;
            font-size:0.9rem;
            animation:bounce 2s infinite
        }
        @keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}
        
        /* Преимущества */
        .benefits{
            padding:5rem 0;
            background:#fff
        }
        .benefits__title{
            text-align:center;
            color:#0a2540;
            font-size:2.5rem;
            margin-bottom:3rem
        }
        .benefits__grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:2rem
        }
        .benefit-card{
            text-align:center;
            padding:2rem;
            background:#f8fafc;
            border-radius:12px;
            transition:transform 0.3s,box-shadow 0.3s
        }
        .benefit-card:hover{
            transform:translateY(-5px);
            box-shadow:0 10px 30px rgba(0,0,0,0.1)
        }
        .benefit-card__icon{
            font-size:3rem;
            margin-bottom:1rem
        }
        .benefit-card__title{
            color:#0a2540;
            font-size:1.3rem;
            margin-bottom:0.5rem;
            font-weight:700
        }
        .benefit-card__text{
            color:#64748b;
            line-height:1.6
        }
        
        /* Услуги */
        .services{
            padding:5rem 0;
            background:#f8fafc
        }
        .services__title{
            text-align:center;
            color:#0a2540;
            font-size:2.5rem;
            margin-bottom:1rem
        }
        .services__subtitle{
            text-align:center;
            color:#64748b;
            font-size:1.1rem;
            margin-bottom:3rem
        }
        .services-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
            gap:2rem
        }
        .service-card{
            background:#fff;
            border-radius:12px;
            overflow:hidden;
            box-shadow:0 5px 20px rgba(0,0,0,0.08);
            transition:transform 0.3s,box-shadow 0.3s
        }
        .service-card:hover{
            transform:translateY(-10px);
            box-shadow:0 15px 40px rgba(0,0,0,0.15)
        }
        .service-card__image{
            width:100%;
            height:220px;
            object-fit:cover
        }
        .service-card__content{padding:1.5rem}
        .service-card h3{
            color:#0a2540;
            margin-bottom:0.8rem;
            font-size:1.3rem
        }
        .service-card p{
            color:#64748b;
            margin-bottom:1rem;
            line-height:1.6
        }
        .service-card__price{
            color:#f97316;
            font-weight:700;
            font-size:1.4rem;
            margin:1rem 0
        }
        .btn--full{width:100%}
        
        /* Форма */
        .application-form{
            background:linear-gradient(135deg,#1a5f7a 0%,#2a8bbd 100%);
            color:#fff;
            padding:3rem 2rem;
            margin:5rem 0;
            border-radius:15px;
            box-shadow:0 10px 40px rgba(0,0,0,0.2)
        }
        .application-form h2{
            color:#fff;
            text-align:center;
            margin-bottom:1rem;
            font-size:2rem
        }
        .application-form p{
            text-align:center;
            margin-bottom:2rem;
            font-size:1.1rem
        }
        .form-row{display:flex;gap:1rem;margin-bottom:1rem}
        .form-group{flex:1}
        .form-group input,.form-group select{
            width:100%;
            padding:1rem;
            border:none;
            border-radius:8px;
            font-size:1rem
        }
        
        /* Footer */
        .footer{
            background:#0a2540;
            color:#fff;
            padding:3rem 0 1rem
        }
        .footer__content{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
            gap:2rem;
            margin-bottom:2rem
        }
        .footer__title{
            color:#fff;
            font-size:1.2rem;
            margin-bottom:1rem
        }
        .footer__links{list-style:none}
        .footer__links li{margin-bottom:0.5rem}
        .footer__links a{
            color:#cbd5e1;
            text-decoration:none;
            transition:color 0.3s
        }
        .footer__links a:hover{color:#f97316}
        .footer__bottom{
            text-align:center;
            padding-top:2rem;
            border-top:1px solid rgba(255,255,255,0.1);
            color:#94a3b8
        }
        .whatsapp-button{
            position:fixed;
            bottom:1.5rem;
            right:1.5rem;
            background:#25D366;
            color:#fff;
            width:60px;
            height:60px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            box-shadow:0 5px 20px rgba(37,211,102,0.4);
            z-index:1000;
            font-size:2rem;
            text-decoration:none;
            transition:transform 0.3s
        }
        .whatsapp-button:hover{transform:scale(1.1)}
        
        /* Мобильная версия */
        @media(max-width:768px){
            .logo{display:none}
            .header__container{justify-content:space-between;gap:0.5rem}
            .btn--urgent{padding:0.5rem 0.8rem;font-size:0.8rem}
            .phone-header{font-size:0.9rem}
            .menu-toggle{display:flex}
            .nav{
                position:fixed;
                top:60px;
                left:0;
                width:100%;
                background:#fff;
                box-shadow:0 5px 15px rgba(0,0,0,0.1);
                transform:translateY(-100%);
                opacity:0;
                visibility:hidden;
                transition:all 0.3s;
                z-index:999;
                flex-direction:column;
                padding:1rem;
                gap:0
            }
            .nav.active{transform:translateY(0);opacity:1;visibility:visible}
            .nav__list{flex-direction:column;gap:0;width:100%}
            .nav__link{display:block;padding:0.8rem;border-bottom:1px solid #e2e8f0}
            
            /* Hero мобильный */
            .hero{
                min-height:100vh;
                padding:5rem 0 3rem;
                background-attachment:scroll
            }
            .hero h1{font-size:2rem;margin-bottom:1rem}
            .hero__subtitle{font-size:1rem;margin-bottom:1.5rem}
            .hero__features{flex-direction:column;gap:1rem;align-items:center}
            .hero__cta{flex-direction:column;gap:1rem}
            .btn--large{width:100%;padding:0.9rem 1.5rem;font-size:1rem}
            
            /* Преимущества мобильный */
            .benefits{padding:3rem 0}
            .benefits__title{font-size:1.8rem;margin-bottom:2rem}
            .benefits__grid{grid-template-columns:1fr;gap:1.5rem}
            
            /* Услуги мобильный */
            .services{padding:3rem 0}
            .services__title{font-size:1.8rem}
            .services-grid{grid-template-columns:1fr;gap:1.5rem}
            .service-card__image{height:180px}
            
            .form-row{flex-direction:column}
            .application-form{padding:2rem 1rem;margin:3rem 0}
            .whatsapp-button{width:50px;height:50px;font-size:1.5rem}
        }