*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial,sans-serif;
background:#09000c;
color:#fff;
line-height:1.7
}
a{text-decoration:none;color:#fff}
header{
position:sticky;
top:0;
z-index:999;
background:#0d020a;
border-bottom:1px solid rgba(255,255,255,.08)
}
.nav{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px
}
.logo{
font-size:38px;
font-weight:800;
color:#fff
}
.logo span{color:#ffbe3b}
.menu a{
margin-left:20px;
font-weight:700;
font-size:14px
}
.hero{
padding:90px 20px;
background:linear-gradient(90deg,#460010,#1a0008,#000);
}
.hero-wrap{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
align-items:center
}
.hero h1{
font-size:68px;
line-height:1.1;
margin-bottom:20px
}
.hero p{
font-size:20px;
opacity:.9;
max-width:800px
}
.card{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
padding:35px;
border-radius:25px;
backdrop-filter:blur(10px)
}
.card h3{
font-size:38px;
margin-bottom:20px
}
.btns{
margin-top:30px;
display:flex;
gap:15px
}
.btn{
padding:14px 26px;
border-radius:40px;
font-weight:700;
display:inline-block
}
.btn.gold{
background:#ffbe3b;
color:#000
}
.btn.dark{
border:1px solid rgba(255,255,255,.2)
}
.section{
max-width:1200px;
margin:auto;
padding:70px 20px
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px
}
.article{
background:#12030d;
padding:25px;
border-radius:18px;
border:1px solid rgba(255,255,255,.08)
}
.article h2{
font-size:24px;
margin-bottom:15px
}
.article p{
opacity:.85
}
footer{
padding:40px 20px;
text-align:center;
border-top:1px solid rgba(255,255,255,.08);
margin-top:50px
}
img.preview{
width:100%;
border-radius:18px;
margin-top:25px
}
@media(max-width:900px){
.hero-wrap{grid-template-columns:1fr}
.hero h1{font-size:42px}
}