body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Arial', sans-serif; overflow-x: hidden; }
body { background: linear-gradient(135deg, #121E3B, #4C2D87, #0FA3B1); background-size: 300% 300%; animation: gradientBG 15s ease infinite; color: #fff; line-height: 1.6; }
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(26, 35, 64, 0.5); backdrop-filter: blur(10px); z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
nav a { color: #fff; text-decoration: none; margin: 0 10px; transition: color 0.3s ease; }
nav a:hover { color: #FFD700; }
.hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
h1 { font-size: 3em; background: linear-gradient(90deg, #4C2D87, #0FA3B1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
h2 { font-size: 1.5em; color: #FFD700; }
button { background: linear-gradient(90deg, #121E3B, #4C2D87); border: 2px solid #FFD700; color: #fff; padding: 10px 20px; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; }
button:hover { transform: scale(1.1) rotate(2deg); background: #FFD700; color: #121E3B; }
section { margin: 40px 0; padding: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
@media (max-width: 768px) { nav { flex-direction: column; } h1 { font-size: 2em; } section { margin: 20px 0; } }
.technology, .applications, .challenges { display: flex; flex-wrap: wrap; justify-content: space-around; }
.item { flex: 1 1 30%; margin: 10px; text-align: center; transition: transform 0.3s ease; }
.item:hover { transform: scale(1.05); }
.item img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin-bottom: 10px; }
footer { text-align: center; padding: 20px; background: rgba(26, 35, 64, 0.8); margin-top: 40px; }
footer button { margin: 0 10px; }
@media (max-width: 480px) { .item { flex: 1 1 100%; } }