{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0f0f10; color: #e5e5e5; font-family: 'Arial', sans-serif; overflow-x: hidden; } header { height: 100vh; background: linear-gradient(135deg, #000428, #004e92); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; padding: 0 2rem; position: relative; overflow: hidden; } header::before { content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent); animation: pulse 6s infinite; z-index: 1; } header h1 { font-size: 4rem; color: #00d4ff; margin-bottom: 1rem; animation: fadeIn 2s ease-out; z-index: 2; position: relative; } header p { font-size: 1.2rem; color: #d3d3d3; max-width: 800px; line-height: 1.8; margin-bottom: 2rem; animation: fadeIn 3s ease-out; z-index: 2; position: relative; } header a { text-decoration: none; background: linear-gradient(90deg, #00d4ff, #6610f2); color: white; padding: 0.8rem 2rem; border-radius: 30px; font-size: 1rem; font-weight: bold; transition: transform 0.3s ease, background 0.3s ease; z-index: 2; position: relative; } header a:hover { transform: scale(1.1); background: linear-gradient(90deg, #6610f2, #00d4ff); } section { padding: 4rem 2rem; } .section-title { font-size: 2rem; color: #00d4ff; margin-bottom: 2rem; text-align: center; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .card { background: #1a1a1d; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .card:hover { transform: translateY(-10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } .card::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent); transform: rotate(45deg); transition: all 0.5s ease; opacity: 0; } .card:hover::before { opacity: 1; } .card h3 { font-size: 1.5rem; color: #00d4ff; margin-bottom: 1rem; } .card p { color: #d3d3d3; font-size: 1rem; } footer { background: #1a1a1d; color: #e5e5e5; text-align: center; padding: 2rem; } footer a { color: #00d4ff; text-decoration: none; } footer a:hover { text-decoration: underline; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.1; } }