/* Свеж синьо-жълт дизайн за едностраничния сайт на БЯЛ БОР СТРОЙ ЕООД. */
:root{--blue:#075dad;--deep:#063968;--sky:#eaf6ff;--yellow:#ffd43b;--ink:#17212b;--muted:#5d6975;--line:#d8e4ed;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font:16px/1.65 Arial,Helvetica,sans-serif}.shell{width:min(1180px,calc(100% - 40px));margin:auto}.section{padding:94px 0}h1,h2,h3,p{margin-top:0}h1{max-width:850px;margin-bottom:25px;font-size:clamp(43px,6.5vw,80px);line-height:1.02;letter-spacing:-.045em}h2{font-size:clamp(31px,4vw,52px);line-height:1.08;letter-spacing:-.035em}h3{font-size:21px;line-height:1.25}.hero{min-height:770px;color:#fff;background:linear-gradient(90deg,rgba(3,48,91,.96),rgba(4,69,128,.82) 48%,rgba(2,59,110,.16) 85%),url('images/roof-hero.jpg') center/cover no-repeat}.topbar{height:100px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff4d}.brand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none}.brand img{width:50px;height:50px}.brand span{display:flex;flex-direction:column;line-height:1.15}.brand b{font-size:21px;letter-spacing:.02em}.brand small{margin-top:7px;font-size:9px;letter-spacing:.13em}.top-phone{color:#fff;text-decoration:none;text-align:right}.top-phone span{display:block;font-size:12px}.top-phone b{font-size:22px}.hero-content{padding-top:120px}.overline,.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:900;color:var(--blue)}.hero .overline{color:var(--yellow)}.hero-text{max-width:720px;font-size:21px;color:#eff8ff}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.button{display:inline-flex;justify-content:center;align-items:center;padding:15px 23px;border-radius:7px;font-weight:900;text-decoration:none;transition:.2s}.button:hover{transform:translateY(-2px)}.yellow{background:var(--yellow);color:#17212b}.outline{color:#fff;border:1px solid #ffffffb3}.hero-points{display:flex;gap:30px;flex-wrap:wrap;margin-top:48px;font-weight:800}.quick-info{background:var(--yellow)}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr)}.quick-grid article{display:flex;align-items:center;gap:15px;padding:25px 22px;border-right:1px solid #b99b22}.quick-grid article:first-child{border-left:1px solid #b99b22}.quick-grid .icon{display:grid;place-items:center;min-width:42px;height:42px;background:var(--deep);color:#fff;border-radius:50%;font-weight:900}.quick-grid b,.quick-grid span{display:block}.quick-grid span{font-size:13px}.intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.intro p{color:var(--muted)}.intro strong{color:var(--ink)}.services{background:var(--sky)}.services>div>h2{max-width:720px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.service-grid article{background:#fff;border:1px solid #d2e8f8;border-radius:10px;padding:30px;box-shadow:0 8px 28px #075dad0b}.service-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:9px;background:var(--yellow);color:var(--deep);font-size:27px;font-weight:900}.service-grid h3{margin:24px 0 10px}.service-grid p,.steps p{color:var(--muted);font-size:15px}.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.photo-card{position:relative}.photo-card:before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--yellow);border-radius:10px}.photo-card img{position:relative;display:block;width:100%;min-height:470px;object-fit:cover;border-radius:10px}.split-copy ul{padding:0;list-style:none}.split-copy li{padding:10px 0 10px 28px;border-bottom:1px solid var(--line);position:relative}.split-copy li:before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:900}.note{background:var(--sky);padding:14px 17px;margin-top:23px;color:var(--muted);font-size:14px}.warranty{background:var(--deep);color:#fff}.warranty-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.light{color:var(--yellow)}.warranty-grid>div>p:not(.eyebrow){color:#d9eafa}.warranty-cards{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ffffff3d}.warranty-cards article{padding:40px 28px}.warranty-cards article+article{border-left:1px solid #ffffff3d}.warranty-cards strong{display:block;color:var(--yellow);font-size:72px;line-height:1}.warranty-cards span{display:block;margin-top:12px;font-weight:800}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:43px}.steps b{display:block;color:var(--blue);font-size:30px;border-bottom:4px solid var(--yellow);margin-bottom:21px}.areas{background:#f7fbfe}.areas-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}.areas-grid p{color:var(--muted)}.text-link{color:var(--blue);font-size:25px;font-weight:900;text-decoration:none}.area-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.area-list span{padding:16px 18px;background:#fff;border-left:4px solid var(--yellow);box-shadow:0 5px 18px #075dad0b;font-weight:800}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq-grid>div:first-child p{color:var(--muted)}details{padding:20px 0;border-top:1px solid var(--line)}details:last-child{border-bottom:1px solid var(--line)}summary{display:flex;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font-size:18px;font-weight:900}summary::-webkit-details-marker{display:none}summary span{color:var(--blue);font-size:25px}details p{margin:13px 45px 0 0;color:var(--muted)}.footer{width:100%;padding:82px 0 24px;background:linear-gradient(120deg,#075dad,#08487d);color:#fff}.footer-content{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}.footer .overline{color:var(--yellow)}.footer p{color:#dcefff}.footer-phone{background:var(--yellow);color:var(--ink);text-decoration:none;padding:25px 32px;border-radius:8px}.footer-phone small,.footer-phone strong{display:block}.footer-phone strong{font-size:31px}.copyright{margin-top:60px;padding-top:22px;border-top:1px solid #ffffff30;font-size:12px;color:#c5dced}.floating-call{position:fixed;z-index:20;right:20px;bottom:20px;padding:14px 20px;border-radius:99px;background:var(--yellow);color:var(--ink);box-shadow:0 8px 28px #0004;text-decoration:none;font-weight:900}
@media(max-width:820px){.section{padding:68px 0}.hero{min-height:730px;background-position:62% center}.hero-content{padding-top:100px}.intro,.split-grid,.warranty-grid,.areas-grid,.faq-grid,.footer-content{grid-template-columns:1fr;gap:38px}.service-grid,.steps{grid-template-columns:1fr 1fr}.quick-grid{grid-template-columns:1fr}.quick-grid article,.quick-grid article:first-child{border:0;border-bottom:1px solid #b99b22}.photo-card{margin-right:18px}.photo-card img{min-height:380px}.footer-phone{width:max-content}}
@media(max-width:540px){.shell{width:min(100% - 28px,1180px)}.topbar{height:86px}.brand img{width:40px;height:40px}.brand b{font-size:16px}.brand small{display:none}.top-phone span{display:none}.top-phone b{font-size:16px}.hero{min-height:720px}.hero-content{padding-top:90px}.hero-text{font-size:18px}.hero-buttons .button{width:100%}.hero-points{display:grid;gap:12px}.service-grid,.steps,.area-list,.warranty-cards{grid-template-columns:1fr}.warranty-cards article+article{border-left:0;border-top:1px solid #ffffff3d}.floating-call{left:14px;right:14px;bottom:14px;text-align:center}.footer{padding-bottom:88px}.footer-phone{width:100%}.footer-phone strong{font-size:27px}}

/* Дизайн на блока с покривния колаж. */
.roof-collage-block {
    width: 100%;
    padding: 80px 20px;
    background: #eaf6ff;
}

.roof-collage-block__content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.roof-collage-block__label {
    margin: 0 0 12px;
    color: #075dad;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.roof-collage-block h2 {
    margin: 0 0 18px;
    color: #17212b;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
}

.roof-collage-block__content > p:not(.roof-collage-block__label) {
    max-width: 800px;
    margin: 0 auto 36px;
    color: #5d6975;
    font-size: 18px;
    line-height: 1.7;
}

.roof-collage-block img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(7, 93, 173, 0.18);
}

@media (max-width: 600px) {
    .roof-collage-block {
        padding: 55px 14px;
    }

    .roof-collage-block__content > p:not(.roof-collage-block__label) {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .roof-collage-block img {
        border-radius: 8px;
    }
}