:root { --primary-color-start: #3B82F6; --primary-color-end: #8B5CF6; --background-dark: #020617; --glass-bg: rgba(30, 41, 59, 0.5); --glass-border: rgba(51, 65, 85, 0.5); --text-primary: #F1F5F9; --text-secondary: #94A3B8; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background-color: var(--background-dark); color: var(--text-secondary); overflow: hidden; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.sky-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; }
#stars1 { animation: animate-stars 150s linear infinite; } #stars2 { animation: animate-stars 100s linear infinite; } #stars3 { animation: animate-stars 75s linear infinite; }
@keyframes animate-stars { from { transform: translateY(0px); } to { transform: translateY(-2000px); } }
.shooting-star { position: absolute; height: 2px; background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); border-radius: 999px; filter: drop-shadow(0 0 6px rgba(192, 218, 255, 0.5)); animation: shooting-star-anim 10s ease-in-out infinite; }
@keyframes shooting-star-anim { 0% { opacity: 1; transform: translateX(100vw) translateY(-50vh) scaleX(0); } 5% { opacity: 1; transform: translateX(50vw) translateY(-25vh) scaleX(1); } 10% { opacity: 0; transform: translateX(0vw) translateY(0vh) scaleX(0); } 100% { opacity: 0; } }
.galaxy-glow { position: fixed; width: 800px; height: 800px; background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 60%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse 10s ease-in-out infinite alternate; z-index: 0; }
@keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; } }
.header { text-align: center; margin-bottom: 60px; position: relative; }
.header h1 { font-size: 52px; font-weight: 700; color: var(--text-primary); letter-spacing: 2px; text-shadow: 0 0 20px rgba(99, 102, 241, 0.5); }
.header h1 span { font-weight: 400; background: linear-gradient(90deg, #3B82F6, #93c5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header p { font-size: 18px; margin-top: 10px; }
.hive-container { display: flex; gap: 40px; perspective: 1000px; position: relative; }
a.hexagon-wrapper { text-decoration: none; position: relative; width: 220px; height: 250px; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.hexagon { position: absolute; width: 100%; height: 100%; background: var(--glass-bg); border: 1px solid var(--glass-border); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.3s ease; }
.hexagon-glow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at center, var(--primary-color-start), var(--primary-color-end)); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); filter: blur(30px); opacity: 0; transition: opacity 0.4s ease; z-index: -1; }
.hexagon-wrapper:hover { transform: translateY(-15px) rotateX(10deg) rotateY(5deg) scale(1.05); }
.hexagon-wrapper:hover .hexagon-glow { opacity: 0.5; }
.hexagon-wrapper:hover .hexagon { background: rgba(30, 41, 59, 0.7); border-color: var(--primary-color-start); }
.hexagon-content { text-align: center; color: var(--text-primary); padding: 10px; }
.hexagon-content svg { width: 48px; height: 48px; margin-bottom: 15px; stroke-width: 1.5px; }
.hexagon-content h3 { font-size: 20px; font-weight: 600; }