body{margin:0;font-family:system-ui;background:#0f1115;color:#fff}
.site-header{display:flex;justify-content:space-between;align-items:center;
padding:16px 32px;background:#0b0d11;position:sticky;top:0;z-index:10}
.logo img{height:56px;filter:drop-shadow(0 0 10px rgba(255,200,0,.35))}
nav a{margin-left:16px;color:#fff;text-decoration:none;
padding:8px 14px;border:1px solid #444;border-radius:6px}

main{max-width:1100px;margin:40px auto;padding:0 20px}

.hero{text-align:center;margin-bottom:60px}
.hero h1{font-size:2.6rem;margin-bottom:12px}
.hero p{font-size:1.2rem;color:#ccc}

.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:26px;margin-bottom:60px}
.product-card{display:block;background:#151922;padding:26px;border-radius:16px;
text-decoration:none;color:#fff;transition:.2s}
.product-card:hover{transform:translateY(-4px);background:#1b2030}
.product-card span{display:inline-block;margin-top:12px;color:#f1c40f;font-weight:700}

.why{text-align:center}
.why ul{list-style:none;padding:0;margin:20px auto 0;max-width:600px}
.why li{margin:10px 0;color:#ccc}

.video{position:relative;padding-top:56.25%;margin:30px 0}
.video iframe{position:absolute;top:0;left:0;width:100%;height:100%}

.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;margin:30px 0}
.benefits div{background:#151922;padding:20px;border-radius:12px}

.download{display:inline-block;margin-top:20px;padding:16px 26px;
background:#f1c40f;color:#000;font-weight:800;border-radius:10px;
text-decoration:none}