* {
    box-sizing:border-box
}

html {
    color-scheme:light
}

body {
    margin:0;
    background:#e9edf2;
    color:#253247;
    font:16px Arial,sans-serif
}

body.dark {
    background:#151b25;
    color:#e7edf7;
    color-scheme:dark
}

.site {
    width:1200px;
    max-width:100%;
    margin:24px auto;
    background:#fff;
    box-shadow:0 5px 25px #0002
}

body.dark .site {
    background:#222b39
}

.header {
    height:276px;
    position:relative;
    padding:0;
    background:#f5f9ff;
    overflow:hidden
}

.header img {
    display:block;
    width:100%;
    max-width:none;
    height:276px;
    object-fit:fill
}

body.dark .header {
    background:#29394d
}

.theme-toggle {
    position:absolute;
    top:15px;
    right:15px;
    z-index:2;
    padding:10px 14px;
    border:1px solid #91a6c0;
    border-radius:8px;
    background:#fff;
    color:#182c47;
    cursor:pointer
}

body.dark .theme-toggle {
    background:#34445b;
    color:#fff
}

.menu-wrap {
    position:relative;
    z-index:20;
    min-height:45px
}

.layout {
    display:grid;
    grid-template-columns:minmax(0,900px) 280px;
    gap:20px;
    align-items:start
}

.main {
    padding:25px;
    min-height:520px
}

.main h2 {
    margin-top:0
}

.services {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:25px
}

.service {
    border:1px solid #dce3ec;
    padding:18px;
    border-radius:8px
}

.sidebar {
    background:#f3f6f9;
    padding:18px;
    margin:0
}

.sidebar section {
    margin-bottom:24px
}

.sidebar h3 {
    margin:0 0 12px;
    border-bottom:1px solid #cbd5e1;
    padding-bottom:8px
}

.sidebar input {
    width:100%;
    padding:9px;
    margin-bottom:7px
}

.sidebar button {
    padding:8px 14px
}

.ad {
    width:250px;
    max-width:100%;
    height:250px;
    display:grid;
    place-items:center;
    background:#dce4ed;
    color:#56667b
}

.footer {
    background:#25364b;
    color:white;
    text-align:center;
    padding:24px
}

body.dark .sidebar {
    background:#303c4d
}

body.dark .service {
    border-color:#4b5c70
}

body.dark .ad {
    background:#46556b;
    color:white
}

@media(max-width:800px) {
.site {
        margin:0
    }

.layout {
        grid-template-columns:1fr;
        gap:0
    }

.main {
        padding:20px
    }

.sidebar {
        margin:0
    }

.services {
        grid-template-columns:1fr
    }

.header {
        padding:0
    }

.header img {
        max-width:none
    }

}