body { margin: 0; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #1a2a6c, #b21f1f); color: #fff; overflow-x: hidden; }
header { position: fixed; top: 0; width: 100%; background: rgba(0, 0, 0, 0.5); transition: background 0.4s ease; z-index: 1000; padding: 15px 20px; box-sizing: border-box; }
header.scrolled { background: #000; }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }
.menu-toggle { display: none; font-size: 28px; cursor: pointer; }
nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li { margin-left: 25px; }
nav ul li a { color: #fff; text-decoration: none; font-size: 16px; transition: color 0.3s ease; }
nav ul li a:hover { color: #FFC107; }
.hero { height: 100vh; background: url('https://images.gptkong.com/demo/sample1.png') no-repeat center/cover; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; }
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: 48px; margin-bottom: 20px; }
.cta-button { background: #FFC107; color: #000; padding: 15px 30px; font-size: 18px; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.3s ease; }
.cta-button:hover { transform: scale(1.1); background: #FFA000; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 20px; box-sizing: border-box; }
.card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 10px; padding: 20px; transition: transform 0.3s ease; position: relative; }
.card:hover { transform: translateY(-10px); }
.card img { width: 100%; height: auto; border-radius: 10px; }
.card h3 { margin-top: 15px; font-size: 20px; }
.parallax { position: relative; height: 400px; overflow: hidden; }
.parallax img { width: 100%; height: auto; position: absolute; top: 0; left: 0; object-fit: cover; transform: translateZ(0); transition: transform 0.3s ease; }
.blur-effect { filter: blur(5px); transition: filter 0.3s ease; }
.blur-effect:hover { filter: none; }
@media (max-width: 768px) { header { padding: 10px 15px; } .menu-toggle { display: block; } nav ul { display: none; flex-direction: column; position: absolute; top: 60px; right: 0; background: #000; width: 200px; padding: 10px; } nav ul.active { display: flex; } nav ul li { margin: 10px 0; } .hero h1 { font-size: 36px; } .cta-button { padding: 12px 25px; font-size: 16px; } }
footer { background: #000; color: #fff; text-align: center; padding: 20px; }