@font-face {
    font-family:system;
    src:local("Bahnschrift")
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    color:#ece8dc;
    background:#101a16;
    font-family:system,"Segoe UI",sans-serif;
    line-height:1.65
}
a {
    color:inherit;
    text-decoration:none
}
header {
    max-width:1240px;
    margin:auto;
    padding:28px 40px;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #314035
}
.brand {
    font-weight:750;
    letter-spacing:.16em;
    color:#d2bb81
}
nav {
    display:flex;
    gap:32px;
    color:#b6bcb0;
    font-size:14px
}
.hero {
    min-height:650px;
    max-width:1240px;
    margin:auto;
    padding:70px 40px 80px;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:40px;
    align-items:center;
    background:radial-gradient(ellipse at 80% 40%,#26372888,transparent 60%)
}
.eyebrow {
    font-size:12px;
    font-weight:700;
    letter-spacing:.22em;
    color:#c7aa70
}
h1,h2,h3,p {
    margin-top:0
}
h1 {
    font-size:clamp(48px,6.8vw,88px);
    letter-spacing:-.035em;
    line-height:1.04;
    margin:26px 0
}
h2 {
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    margin-bottom:28px
}
h3 {
    font-size:23px;
    line-height:1.3;
    margin:18px 0
}
.lead {
    font-size:19px;
    color:#bdc2b8;
    max-width:520px
}
.button {
    display:inline-block;
    background:#c7aa70;
    color:#172019;
    padding:15px 27px;
    font-weight:700;
    margin:16px 0 18px;
    border:1px solid #d9bd87
}
.button:hover {
    background:#e3c98d
}
.caption {
    font-size:11px;
    letter-spacing:.14em;
    color:#829184
}
.insignia {
    text-align:center
}
.insignia img {
    width:100%;
    height:auto;
    max-width:450px;
    object-fit:contain
}
.insignia span {
    display:block;
    color:#91a08f;
    font-size:11px;
    letter-spacing:.2em
}
.briefing,.online {
    max-width:1240px;
    margin:auto;
    padding:64px 40px;
    border-top:1px solid #314035
}
.missions {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
article {
    padding:28px;
    background:#19251e;
    border:1px solid #334035
}
article span {
    color:#c7aa70;
    font-size:11px;
    letter-spacing:.12em
}
article p,.online p {
    color:#aeb8ac
}
.online {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center
}
.service {
    background:#1b291f;
    padding:32px;
    border:1px solid #56603c
}
.badge {
    font-size:11px;
    letter-spacing:.13em;
    color:#d1b77c
}
.levels {
    border-top:1px solid #425039;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:24px;
    margin-top:28px
}
.levels strong {
    font-size:36px;
    color:#c7aa70
}
.levels span {
    font-size:11px;
    letter-spacing:.1em;
    color:#aab5a5
}
footer {
    max-width:1240px;
    margin:auto;
    padding:30px 40px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid #314035;
    font-size:11px;
    color:#8b9d8b;
    letter-spacing:.07em
}
footer p {
    margin:0
}
a:focus-visible {
    outline:2px solid #e2c789;
    outline-offset:5px
}
@media(max-width:720px) {
    header {
    padding:22px
}
nav {
    gap:18px
}
.hero {
    padding:40px 24px;
    grid-template-columns:1fr;
    gap:12px
}
.insignia img {
    max-width:280px
}
.missions,.online {
    grid-template-columns:1fr
}
.briefing,.online {
    padding:44px 24px
}
.online {
    gap:24px
}
footer {
    flex-wrap:wrap;
    padding:24px
}
.brand {
    font-size:12px
}

}