body{margin:0;font-family:Arial,sans-serif;background:#050505;color:#fff;line-height:1.7}
header{position:sticky;top:0;background:#000;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.navbar{max-width:1400px;margin:auto;padding:0 40px;display:flex;justify-content:space-between;align-items:center}
.logo-wrap{display:flex;align-items:center;gap:18px}
.logo-wrap img{height:70px}
nav ul{display:flex;gap:20px;list-style:none}
nav a{color:white;text-decoration:none;transition:.3s}
nav a:hover{color:#008cff}
.hero{min-height:85vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 20px;background:radial-gradient(circle at top left,rgba(0,140,255,.2),transparent 35%),radial-gradient(circle at top right,rgba(255,0,0,.18),transparent 35%)}
.hero h1{font-size:4rem;margin-bottom:20px}
.hero p{font-size:1.2rem;color:#d0d0d0;max-width:900px;margin:auto}
.btn{display:inline-block;margin-top:30px;padding:15px 35px;border-radius:50px;background:linear-gradient(90deg,#0077ff,#ff0000);color:#fff;text-decoration:none;font-weight:bold}
.section{max-width:1400px;margin:auto;padding:100px 40px}
.section-title{font-size:3rem;margin-bottom:25px}
.section-title span{color:#008cff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:30px;border-radius:24px;transition:all .35s ease;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transition:.5s}
.card:hover::before{left:100%}
.card:hover{transform:translateY(-10px) scale(1.02);border-color:#008cff;box-shadow:0 0 25px rgba(0,140,255,.25)}
.card img{width:100%;border-radius:14px;margin-bottom:15px}
footer{text-align:center;padding:30px;color:#999;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:768px){.navbar{flex-direction:column;gap:20px}.hero h1{font-size:2.5rem}}