body { margin: 0; font-family: 'Orbitron', sans-serif; background: #0a0a2a; color: #fff; line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1440px; margin: auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.header { position: relative; width: 100%; height: 400px; background: linear-gradient(135deg, #0a0a2a, #1e1e4a); overflow: hidden; }
.header::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: url('https://images.gptkong.com/demo/sample1.png'), url('https://images.gptkong.com/demo/sample2.png'); background-size: 300px; animation: moveBackground 10s linear infinite; }
@keyframes moveBackground { 0% { transform: translate(0, 0); } 100% { transform: translate(-50%, -50%); } }
.header h1 { position: relative; z-index: 2; text-align: center; font-size: 48px; color: #0ff; text-transform: uppercase; letter-spacing: 4px; margin-top: 120px; text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff; }
.header p { position: relative; z-index: 2; text-align: center; font-size: 18px; color: #ccc; margin-top: 20px; }
.features { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px; }
.feature { flex: 1 1 30%; min-width: 300px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 20px; margin-bottom: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 255, 255, 0.5); }
.feature img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 15px; }
.feature h3 { font-size: 24px; color: #0ff; margin-bottom: 10px; }
.feature p { font-size: 16px; color: #ddd; }
.data-stream { position: relative; width: 100%; height: 200px; background: #1a1a3a; margin-top: 40px; overflow: hidden; }
.data-stream::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: repeating-linear-gradient(90deg, transparent, transparent 50px, #0ff 50px, #0ff 100px); animation: flowData 5s linear infinite; }
@keyframes flowData { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.cityscape { position: relative; width: 100%; height: 300px; background: url('https://images.gptkong.com/demo/sample3.png') no-repeat center center/cover; margin-top: 40px; }
.cityscape::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(10, 10, 42, 1), rgba(10, 10, 42, 0)); }
@media (max-width: 768px) { .header h1 { font-size: 36px; } .feature { flex: 1 1 100%; } }
@media (max-width: 480px) { .header h1 { font-size: 28px; } }