*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:#0b0c0e;color:#f3f1ed;
 font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 line-height:1.65
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:auto;padding:0 22px}

header{
 position:sticky;top:0;z-index:100;
 background:rgba(11,12,14,.94);
 backdrop-filter:blur(16px);
 border-bottom:1px solid #292d31
}
.nav{
 min-height:70px;display:flex;align-items:center;
 justify-content:space-between;gap:20px
}
.logo{
 font-weight:900;letter-spacing:.08em;font-size:21px
}
.logo span,.tag,.crumb{color:#c75b5f}

nav{
 display:flex;gap:17px;flex-wrap:wrap;
 justify-content:flex-end
}
nav a{color:#c7c9c7;font-size:13px}
nav a:hover{color:#fff}

.hero{
 padding:92px 0 75px;
 border-bottom:1px solid #292d31;
 background:
 radial-gradient(circle at 82% 20%,rgba(157,47,53,.20),transparent 34%)
}

.page{padding:70px 0}

.eyebrow,.tag{
 text-transform:uppercase;
 letter-spacing:.14em;
 font-size:11px;
 font-weight:800
}

h1{
 font-size:clamp(42px,7vw,78px);
 line-height:1.02;
 letter-spacing:-.055em;
 margin:12px 0 22px
}
h2{font-size:32px;line-height:1.15}
h3{line-height:1.25}

.lead{
 font-size:19px;
 color:#a8aaa8;
 max-width:780px
}

.actions{
 display:flex;gap:12px;flex-wrap:wrap
}

.btn{
 display:inline-block;
 margin-top:20px;
 background:#9d2f35;
 padding:11px 18px;
 border-radius:11px;
 font-weight:750
}
.btn:hover{background:#c75b5f}
.btn.ghost{
 background:transparent;
 border:1px solid #454a4f
}

.section{padding:58px 0}

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

.card{
 background:#121417;
 border:1px solid #292d31;
 border-radius:18px;
 padding:24px;
 transition:.18s
}
.card:hover{
 transform:translateY(-3px);
 border-color:#4a4e52
}
.card h3{font-size:21px;margin:8px 0}
.card p{color:#a8aaa8;margin-bottom:0}

.article{
 max-width:820px
}
.article h1{font-size:clamp(40px,6vw,66px)}
.article h2{
 margin-top:42px;
 font-size:29px
}
.article p,.article li{color:#c4c5c3}
.article ul{padding-left:22px}

.note{
 margin:28px 0;
 padding:20px 22px;
 border-left:3px solid #9d2f35;
 background:#15171a;
 border-radius:0 12px 12px 0
}

.downloads{
 display:grid;
 gap:14px;
 margin-top:25px
}
.download{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 padding:20px 22px;
 background:#121417;
 border:1px solid #292d31;
 border-radius:15px
}
.download:hover{border-color:#9d2f35}
.download small{display:block;color:#8f9290}

footer{
 border-top:1px solid #292d31;
 padding:32px 0;
 color:#8f9290;
 font-size:13px
}

@media(max-width:900px){
 nav{display:none}
 .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 .grid{grid-template-columns:1fr}
 .hero{padding:62px 0 55px}
 .page{padding:50px 0}
 h1{font-size:45px}
 .download{display:block}
 .download .btn{margin-top:12px}
}