*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
background:#0b0b0b;
color:#ffffff;
line-height:1.6;
}
a{
color:#ffffff;
text-decoration:none;
}
.container{
max-width:1200px;
margin:auto;
padding:0 24px;
}
/* HEADER */
header{
border-bottom:1px solid #222;
}
.nav{
display:flex;
justify-content:flex-end;
align-items:center;
height:70px;
}
nav a{
margin-left:28px;
font-weight:500;
opacity:0.8;
transition:opacity .2s;
}
nav a:hover{
opacity:1;
}
/* HERO */
.hero{
padding:80px 0;
}
.hero-grid{
display:grid;
grid-template-columns:1fr 320px;
gap:60px;
align-items:center;
}
.hero h1{
font-size:48px;
margin-bottom:20px;
}
.hero p{
margin-bottom:16px;
font-size:18px;
color:#cfcfcf;
}
.hero strong{
color:#fff;
}
.btn{
display:inline-block;
margin-top:20px;
background:#fff;
color:#000;
padding:12px 22px;
border-radius:8px;
font-weight:600;
transition:transform .15s,box-shadow .15s;
}
.btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(255,255,255,0.15);
}
.hero-avatar{
display:flex;
justify-content:center;
}
.hero-avatar img{
width:160px;
height:160px;
}
/* PLUGINS */
.plugins{
padding:80px 0;
border-top:1px solid #222;
}
.plugins h2{
font-size:32px;
margin-bottom:30px;
}
/* CAROUSEL */
.carousel{
position:relative;
}
.plugin-grid{
display:flex;
gap:24px;
overflow-x:auto;
scroll-behavior:smooth;
padding-bottom:10px;
cursor: grab;
}
.plugin-grid::-webkit-scrollbar{
display:none;
}
/* CARD */
.plugin-card{
flex:0 0 320px;
background:#111;
border:1px solid #222;
border-radius:12px;
overflow:hidden;
transition:transform .2s,border .2s;
cursor:pointer;
}
.plugin-card:hover{
transform:translateY(-4px);
border:1px solid #444;
}
.plugin-card img{
width:100%;
height:180px;
object-fit:cover;
display:block;
}
.plugin-card-content{
padding:18px;
}
.plugin-card h3{
font-size:20px;
margin-bottom:10px;
}
.plugin-card p{
font-size:14px;
color:#bbb;
}
/* SCROLL BUTTONS */
.scroll-btn{
position:absolute;
top:40%;
transform:translateY(-50%);
background:#000;
border:1px solid #333;
color:#fff;
width:40px;
height:40px;
border-radius:50%;
cursor:pointer;
z-index:10;
opacity:0;
transition:opacity .2s;
}
.scroll-btn.left{
left:-20px;
}
.scroll-btn.right{
right:-20px;
}
.scroll-btn:hover{
background:#111;
}
/* FEATURES */
.features{
padding:80px 0;
border-top:1px solid #222;
}
.features h2{
font-size:32px;
margin-bottom:40px;
}
.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}
.feature{
background:#111;
border:1px solid #222;
border-radius:10px;
padding:24px;
}
.feature h3{
margin-bottom:10px;
}
/* SUPPORT */
.support{
padding:80px 0;
border-top:1px solid #222;
text-align:center;
}
.support h2{
font-size:32px;
margin-bottom:20px;
}
.support p{
color:#cfcfcf;
margin-bottom:10px;
}
.support a{
font-weight:600;
color:#fff;
border-bottom:1px solid #555;
}
.support a:hover{
border-color:#fff;
}
/* FOOTER */
footer{
border-top:1px solid #222;
padding:30px 0;
margin-top:40px;
}
.footer{
text-align:center;
font-size:14px;
color:#888;
}
/* MOBILE */
@media(max-width:900px){
.hero-grid{
grid-template-columns:1fr;
text-align:center;
}
.hero-avatar{
margin-top:30px;
}
.scroll-btn.left{
left:4px;
}
.scroll-btn.right{
right:4px;
}
}