:root {--cyan: #00FFFF;--magenta: #FF00FF;--green: #00FF00;--purple: #8A2BE2;--blue: #0066FF;--pink: #FF1493;--yellow: #FFFF00;--orange: #FFA500;--bg-dark: #0A0A0A;--bg-charcoal: #1A1A1A;--bg-space: #000011;--text-primary: #FFFFFF;--text-secondary: #CCCCCC;--text-muted: #888888;--glow-cyan: 0 0 15px rgba(0, 255, 255, 0.6);--glow-magenta: 0 0 15px rgba(255, 0, 255, 0.6);--glow-green: 0 0 15px rgba(0, 255, 0, 0.6);--glow-purple: 0 0 15px rgba(138, 43, 226, 0.6);--glow-blue: 0 0 15px rgba(0, 102, 255, 0.6);--glow-yellow: 0 0 15px rgba(255, 255, 0, 0.6);--glow-orange: 0 0 15px rgba(255, 165, 0, 0.6);--gradient-cyan: linear-gradient(45deg, var(--cyan), var(--blue));--gradient-magenta: linear-gradient(45deg, var(--magenta), var(--pink));--gradient-green: linear-gradient(45deg, var(--green), var(--cyan));--font-primary: 'Orbitron', monospace;--font-secondary: 'Rajdhani', sans-serif;--spacing-xs: 0.5rem;--spacing-sm: 1rem;--spacing-md: 2rem;--spacing-lg: 4rem;--spacing-xl: 8rem;--spacing-xxl: 12rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--transition-fast: 0.2s ease;--transition-normal: 0.3s ease;--transition-slow: 0.5s ease}  * {margin: 0;padding: 0;box-sizing: border-box} html {scroll-behavior: smooth} body {font-family: var(--font-secondary);background: var(--bg-dark);color: var(--text-primary);line-height: 1.6;overflow-x: hidden;position: relative}  h1, h2, h3, h4, h5, h6 {font-family: var(--font-primary);font-weight: 700;line-height: 1.2} .main-title {font-size: 4rem;font-weight: 900;text-transform: uppercase;letter-spacing: 0.2em;position: relative;text-shadow: var(--glow-cyan);animation: titlePulse 3s ease-in-out infinite alternate} .subtitle {font-size: 1.5rem;color: var(--magenta);text-shadow: var(--glow-magenta);margin-top: var(--spacing-sm)} .section-title {font-size: 2.5rem;text-align: center;margin-bottom: var(--spacing-lg);position: relative;text-shadow: var(--glow-green)}  .container {max-width: 1200px;margin: 0 auto;padding: 0 var(--spacing-sm)}  .navbar {position: fixed;top: 0;width: 100%;background: rgba(10, 10, 10, 0.95);backdrop-filter: blur(10px);border-bottom: 2px solid var(--cyan);box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);z-index: 1000;transition: var(--transition-normal)} .nav-container {display: flex;justify-content: space-between;align-items: center;padding: var(--spacing-sm) var(--spacing-md);max-width: 1200px;margin: 0 auto} .nav-logo {position: relative} .logo-text {font-family: var(--font-primary);font-size: 1.5rem;font-weight: 900;color: var(--cyan);text-shadow: var(--glow-cyan);text-transform: uppercase;letter-spacing: 0.1em} .nav-menu {display: flex;list-style: none;gap: var(--spacing-md)} .nav-link {color: var(--text-primary);text-decoration: none;font-weight: 600;padding: var(--spacing-xs) var(--spacing-sm);border-radius: var(--radius-sm);transition: var(--transition-fast);position: relative} .nav-link:hover, .nav-link.active {color: var(--cyan);text-shadow: var(--glow-cyan);background: rgba(0, 255, 255, 0.1)} .nav-link::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;background: var(--cyan);transition: var(--transition-fast)} .nav-link:hover::after, .nav-link.active::after {width: 100%}  .dropdown {position: relative;width: 100%} .dropdown-menu {position: absolute;top: 100%;left: 0;background: rgba(10, 10, 10, 0.95);backdrop-filter: blur(10px);border: 1px solid var(--cyan);border-radius: var(--radius-md);box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);min-width: 200px;opacity: 0;visibility: hidden;transform: translateY(-10px);transition: var(--transition-normal);z-index: 1001;padding: var(--spacing-xs) 0;list-style: none}  .dropdown-menu.show {opacity: 1;visibility: visible;transform: translateY(0)} .dropdown-link {display: block;padding: var(--spacing-xs) var(--spacing-sm);color: var(--text-primary);text-decoration: none;font-weight: 600;transition: var(--transition-fast);border-radius: var(--radius-sm);margin: 0 var(--spacing-xs)} .dropdown-link:hover, .dropdown-link.active {color: var(--cyan);text-shadow: var(--glow-cyan);background: rgba(0, 255, 255, 0.1)} .hamburger {display: none;flex-direction: column;cursor: pointer} .bar {width: 25px;height: 3px;background: var(--cyan);margin: 3px 0;transition: var(--transition-fast);box-shadow: var(--glow-cyan)}  .hero {min-height: 60vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(135deg, var(--bg-space), var(--bg-charcoal));padding-top: 3rem;padding-bottom: 2rem}  .games-hero {min-height: 40vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(135deg, var(--bg-space), var(--bg-charcoal));padding-top: 3rem;padding-bottom: 1rem}  .game-hero {min-height: 60vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;background: linear-gradient(135deg, var(--bg-space), var(--bg-charcoal));padding-top: 5rem} .game-hero-content {display: grid;grid-template-columns: 1fr 1fr;gap: var(--spacing-lg);align-items: center;width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 var(--spacing-sm);position: relative;z-index: 2} .game-hero-info {text-align: left} .game-subtitle {font-size: 1.5rem;color: var(--cyan);text-shadow: var(--glow-cyan);margin-bottom: var(--spacing-md);font-weight: 600} .game-description {font-size: 1.1rem;color: var(--text-secondary);margin-bottom: var(--spacing-md);line-height: 1.6} .game-actions {display: flex;gap: var(--spacing-md);margin-top: var(--spacing-lg);position: relative;z-index: 3} .game-hero-image {display: flex;justify-content: center;align-items: center;position: relative;z-index: 2} .game-logo-img {max-width: 100%;height: auto;border-radius: var(--radius-lg);box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);transition: var(--transition-normal);position: relative;z-index: 2} .game-logo-img:hover {transform: scale(1.05);box-shadow: 0 0 40px rgba(0, 255, 255, 0.5)}  .screenshots-section {padding: var(--spacing-lg) 0;background: var(--bg-dark)}  .features-section {padding: var(--spacing-lg) 0;background: var(--bg-dark)} .features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: var(--spacing-lg);margin-top: var(--spacing-lg);justify-items: center} .feature-card {background: rgba(0, 0, 0, 0.3);border: 1px solid var(--cyan);border-radius: var(--radius-lg);padding: var(--spacing-lg);text-align: center;transition: var(--transition-normal);max-width: 300px;width: 100%} .feature-card:hover {transform: translateY(-5px);box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);border-color: var(--magenta)} .feature-icon {font-size: 3rem;margin-bottom: var(--spacing-md);display: block} .feature-title {font-size: 1.25rem;color: var(--cyan);margin-bottom: var(--spacing-sm);text-shadow: var(--glow-cyan)} .feature-description {color: var(--text-secondary);line-height: 1.6}  .description-section {padding: var(--spacing-lg) 0;background: var(--bg-charcoal)} .description-content {max-width: 800px;margin: 0 auto;padding: 0 var(--spacing-sm)} .description-subtitle {font-size: 2rem;color: var(--cyan);text-align: center;margin-bottom: var(--spacing-lg);text-shadow: var(--glow-cyan);font-weight: 700} .description-text {font-size: 1.1rem;color: var(--text-secondary);line-height: 1.8;margin-bottom: var(--spacing-md);text-align: justify} .description-heading {font-size: 1.5rem;color: var(--magenta);margin: var(--spacing-lg) 0 var(--spacing-md) 0;text-shadow: var(--glow-magenta);font-weight: 600} .description-list {list-style: none;padding: 0;margin-bottom: var(--spacing-md)} .description-list li {color: var(--text-secondary);line-height: 1.7;margin-bottom: var(--spacing-xs);padding-left: var(--spacing-md);position: relative} .description-list li::before {content: '▸';color: var(--cyan);position: absolute;left: 0;text-shadow: var(--glow-cyan)} .description-list strong {color: var(--text-primary);font-weight: 600} .screenshots-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: var(--spacing-md);margin-top: var(--spacing-lg)} .screenshot-item {position: relative;border-radius: var(--radius-md);overflow: hidden;background: var(--bg-charcoal);border: 1px solid var(--cyan);box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);transition: var(--transition-normal);display: flex;justify-content: center;align-items: center;padding: var(--spacing-sm)} .screenshot-item:hover {transform: translateY(-5px);box-shadow: 0 0 30px rgba(0, 255, 255, 0.4)} .screenshot-img {width: 70%;height: auto;object-fit: cover;border-radius: var(--radius-md);transition: var(--transition-normal);display: block} .screenshot-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));padding: var(--spacing-md);transform: translateY(100%);transition: var(--transition-normal)} .screenshot-item:hover .screenshot-overlay {transform: translateY(0)} .screenshot-caption {color: var(--text-primary);font-weight: 600;text-shadow: var(--glow-cyan)} .hero-content {text-align: center;z-index: 2;position: relative} .hero-logo {margin-bottom: var(--spacing-md)} .hero-tagline {font-size: 1.25rem;color: var(--text-secondary);margin-bottom: var(--spacing-md);text-shadow: 0 0 10px rgba(255, 255, 255, 0.5)} .hero-buttons {display: flex;gap: var(--spacing-md);justify-content: center;flex-wrap: wrap} .hero-background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1} .grid-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);background-size: 50px 50px;animation: gridMove 30s linear infinite} .scan-lines {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.03) 2px, rgba(0, 255, 255, 0.03) 4px );animation: scanMove 15s linear infinite}  .btn {display: inline-block;padding: var(--spacing-sm) var(--spacing-md);border: 2px solid;border-radius: var(--radius-md);text-decoration: none;font-weight: 600;text-transform: uppercase;letter-spacing: 0.1em;position: relative;overflow: hidden;transition: var(--transition-normal);cursor: pointer} .btn-primary {border-color: var(--cyan);background: var(--cyan);color: #001a1a !important;box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8)} .btn-primary:hover {background: var(--magenta);color: var(--bg-dark);box-shadow: var(--glow-magenta);transform: translateY(-2px)} .btn-secondary {border-color: var(--magenta);color: var(--magenta);background: rgba(255, 0, 255, 0.1);box-shadow: var(--glow-magenta)} .btn-secondary:hover {background: var(--magenta);color: var(--bg-dark);box-shadow: 0 0 30px rgba(255, 0, 255, 0.8);transform: translateY(-2px)} .btn-glow {position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: var(--transition-normal)} .btn:hover .btn-glow {left: 100%}  .featured-games {padding: var(--spacing-xl) 0;background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));position: relative;overflow: hidden} .section-particles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;overflow: hidden} .featured-games .container {position: relative;z-index: 2}  .mission-section, .values-section, .tech-section, .future-section, .screenshots-section, .privacy-content {background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));position: relative;overflow: hidden} .mission-section .container, .values-section .container, .tech-section .container, .future-section .container, .screenshots-section .container, .privacy-content .container {position: relative;z-index: 2} .games-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: var(--spacing-lg);margin-top: var(--spacing-lg)} .game-card {background: var(--bg-dark);border: 2px solid var(--cyan);border-radius: var(--radius-lg);overflow: hidden;transition: var(--transition-normal);position: relative;box-shadow: var(--glow-cyan)} .game-card:hover {transform: translateY(-10px);box-shadow: 0 0 40px rgba(0, 255, 255, 0.6)} .game-image {position: relative;height: 200px;overflow: hidden} .game-image img {width: 100%;height: 100%;object-fit: cover;transition: var(--transition-normal)} .game-card:hover .game-image img {transform: scale(1.1)} .game-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg, rgba(0, 255, 255, 0.8), rgba(255, 0, 255, 0.8));display: flex;flex-direction: column;justify-content: center;align-items: center;opacity: 0;transition: var(--transition-normal)} .game-card:hover .game-overlay {opacity: 1} .game-logo {font-family: var(--font-primary);font-size: 1.5rem;font-weight: 700;color: var(--bg-dark);text-shadow: 0 0 10px rgba(0, 0, 0, 0.5)} .game-subtitle {color: var(--bg-dark);font-weight: 600;margin-top: var(--spacing-xs)} .game-content {padding: var(--spacing-md);text-align: center} .game-content .game-btn {margin-bottom: var(--spacing-sm)} .store-info {font-size: 0.875rem;color: var(--text-muted);margin-top: var(--spacing-sm);font-weight: 500;text-align: center;opacity: 0.8} .game-title {font-size: 1.5rem;color: var(--cyan);margin-bottom: var(--spacing-sm);text-shadow: var(--glow-cyan)} .game-description {color: var(--text-secondary);margin-bottom: var(--spacing-md);line-height: 1.6} .game-features {display: flex;gap: var(--spacing-xs);margin-bottom: var(--spacing-md);flex-wrap: wrap} .feature-tag {background: rgba(0, 255, 255, 0.2);color: var(--cyan);padding: var(--spacing-xs) var(--spacing-sm);border-radius: var(--radius-sm);font-size: 0.875rem;font-weight: 600;border: 1px solid var(--cyan)} .game-btn {display: inline-block;padding: var(--spacing-sm) var(--spacing-md);background: var(--cyan);color: #001a1a !important;text-decoration: none;border-radius: var(--radius-md);font-weight: 700;text-transform: uppercase;letter-spacing: 0.1em;transition: var(--transition-normal);position: relative;overflow: hidden;box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8)} .game-btn:hover {background: var(--magenta);box-shadow: var(--glow-magenta);transform: translateY(-2px)}  .download-btn {background: var(--green) !important;color: #001a00 !important;box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);margin-top: var(--spacing-sm)} .download-btn:hover {background: var(--orange) !important;box-shadow: var(--glow-orange);transform: translateY(-2px)}  .game-actions .btn-primary {background: var(--green) !important;color: #001a00 !important;box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);border: 2px solid var(--green)} .game-actions .btn-primary:hover {background: var(--orange) !important;box-shadow: var(--glow-orange);border-color: var(--orange);transform: translateY(-2px)}  .game-actions .btn .btn-text {font-size: 0.9rem;white-space: nowrap}  .studio-highlights {padding: var(--spacing-xl) 0;background: var(--bg-dark)} .highlights-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: var(--spacing-lg)} .highlight-card {text-align: center;padding: var(--spacing-lg);background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(0, 0, 0, 0.8));border: 2px solid transparent;border-radius: var(--radius-lg);transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);position: relative;overflow: hidden;backdrop-filter: blur(10px);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3)} .highlight-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, transparent, rgba(138, 43, 226, 0.1), transparent);opacity: 0;transition: opacity 0.3s ease} .highlight-card:hover {transform: translateY(-8px) scale(1.02);border-color: var(--purple);box-shadow: 0 20px 40px rgba(138, 43, 226, 0.3), 0 0 30px rgba(138, 43, 226, 0.2)} .highlight-card:hover::before {opacity: 1} .highlight-icon {width: 80px;height: 80px;margin: 0 auto var(--spacing-md);background: linear-gradient(135deg, var(--purple), var(--pink));border-radius: 50%;display: flex;align-items: center;justify-content: center;position: relative;font-size: 2rem;box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);transition: all 0.3s ease} .highlight-card:hover .highlight-icon {transform: scale(1.1) rotate(5deg);box-shadow: 0 0 50px rgba(138, 43, 226, 0.8)} .highlight-title {font-size: 1.25rem;font-weight: 700;color: var(--purple);margin-bottom: var(--spacing-sm);text-shadow: 0 0 20px rgba(138, 43, 226, 0.8);transition: all 0.3s ease;position: relative} .highlight-card:hover .highlight-title {color: var(--pink);text-shadow: 0 0 30px rgba(255, 20, 147, 0.8)} .highlight-text {color: var(--text-secondary);line-height: 1.8;font-size: 1.1rem;transition: all 0.3s ease;position: relative;z-index: 1} .highlight-card:hover .highlight-text {color: var(--text-primary)}  .news-ticker {background: linear-gradient(135deg, var(--bg-charcoal) 0%, rgba(26, 26, 26, 0.95) 25%, rgba(0, 0, 0, 0.9) 50%, rgba(26, 26, 26, 0.95) 75%, var(--bg-charcoal) 100%);border-top: 3px solid transparent;border-bottom: 3px solid transparent;background-clip: padding-box;overflow: hidden;position: relative;box-shadow: 0 0 30px rgba(0, 255, 0, 0.3), inset 0 0 50px rgba(0, 0, 0, 0.5);animation: tickerGlow 4s ease-in-out infinite} .news-ticker::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 0, 0.1) 20%, rgba(0, 255, 0, 0.2) 50%, rgba(0, 255, 0, 0.1) 80%, transparent 100%);animation: tickerScan 3s linear infinite;pointer-events: none} .news-ticker::after {content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, transparent 0%, var(--green) 50%, transparent 100%);animation: tickerLine 2s ease-in-out infinite;box-shadow: 0 0 20px var(--green)}  .news-ticker .ticker-particles {position: absolute;top: 0;left: 0;right: 0;bottom: 0;pointer-events: none;z-index: 1} .news-ticker .ticker-particles::before {content: '';position: absolute;width: 2px;height: 2px;background: var(--cyan);border-radius: 50%;box-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan);animation: tickerParticle1 4s linear infinite} .news-ticker .ticker-particles::after {content: '';position: absolute;width: 3px;height: 3px;background: var(--magenta);border-radius: 50%;box-shadow: 0 0 10px var(--magenta), 0 0 20px var(--magenta);animation: tickerParticle2 6s linear infinite} .ticker-container {padding: var(--spacing-xs) 0;position: relative;z-index: 2} .ticker-content {display: flex;animation: tickerScrollComplete 30s linear infinite;white-space: nowrap;position: relative} .ticker-content:hover {animation-play-state: paused} .ticker-item {color: var(--green);font-weight: 700;font-size: 1.1rem;margin-right: var(--spacing-xxl);text-shadow: 0 0 10px var(--green), 0 0 20px var(--green), 0 0 30px var(--green);flex-shrink: 0;position: relative;padding: 0.25rem 0.75rem;border-radius: 0.5rem;background: rgba(0, 255, 0, 0.05);border: 1px solid rgba(0, 255, 0, 0.2);transition: all 0.3s ease;animation: tickerItemPulse 3s ease-in-out infinite} .ticker-item:nth-child(1) {animation-delay: 0s;color: var(--cyan);text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan), 0 0 30px var(--cyan);border-color: rgba(0, 255, 255, 0.3);background: rgba(0, 255, 255, 0.05)} .ticker-item:nth-child(2) {animation-delay: 0.5s;color: var(--magenta);text-shadow: 0 0 10px var(--magenta), 0 0 20px var(--magenta), 0 0 30px var(--magenta);border-color: rgba(255, 0, 255, 0.3);background: rgba(255, 0, 255, 0.05)} .ticker-item:nth-child(3) {animation-delay: 1s;color: var(--purple);text-shadow: 0 0 10px var(--purple), 0 0 20px var(--purple), 0 0 30px var(--purple);border-color: rgba(138, 43, 226, 0.3);background: rgba(138, 43, 226, 0.05)} .ticker-item:nth-child(4) {animation-delay: 1.5s;color: var(--pink);text-shadow: 0 0 10px var(--pink), 0 0 20px var(--pink), 0 0 30px var(--pink);border-color: rgba(255, 20, 147, 0.3);background: rgba(255, 20, 147, 0.05)} .ticker-item:nth-child(5) {animation-delay: 2s;color: var(--blue);text-shadow: 0 0 10px var(--blue), 0 0 20px var(--blue), 0 0 30px var(--blue);border-color: rgba(0, 102, 255, 0.3);background: rgba(0, 102, 255, 0.05)} .ticker-item:nth-child(6) {animation-delay: 2.5s;color: var(--yellow);text-shadow: 0 0 10px var(--yellow), 0 0 20px var(--yellow), 0 0 30px var(--yellow);border-color: rgba(255, 255, 0, 0.3);background: rgba(255, 255, 0, 0.05)} .ticker-item:nth-child(7) {animation-delay: 3s;color: var(--orange);text-shadow: 0 0 10px var(--orange), 0 0 20px var(--orange), 0 0 30px var(--orange);border-color: rgba(255, 165, 0, 0.3);background: rgba(255, 165, 0, 0.05)} .ticker-item:nth-child(8) {animation-delay: 3.5s;color: var(--cyan);text-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan), 0 0 30px var(--cyan);border-color: rgba(0, 255, 255, 0.3);background: rgba(0, 255, 255, 0.05)} .ticker-item strong {font-weight: 900;letter-spacing: 0.5px;text-transform: uppercase;font-size: 0.9em} .ticker-item:hover {transform: scale(1.05) translateY(-2px);box-shadow: 0 0 30px currentColor, 0 5px 15px rgba(0, 0, 0, 0.3);background: rgba(255, 255, 255, 0.1);border-color: currentColor;animation-play-state: paused} .ticker-item::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);border-radius: 0.5rem;opacity: 0;transition: opacity 0.3s ease;animation: tickerShimmer 2s ease-in-out infinite} .ticker-item:hover::before {opacity: 1} .ticker-item::after {content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: linear-gradient(45deg, var(--cyan), var(--magenta), var(--green), var(--purple), var(--pink));border-radius: 0.6rem;z-index: -1;opacity: 0;transition: opacity 0.3s ease;animation: tickerBorderRotate 3s linear infinite} .ticker-item:hover::after {opacity: 0.3}  @keyframes tickerGlow {0%, 100% {box-shadow: 0 0 30px rgba(0, 255, 0, 0.3), inset 0 0 50px rgba(0, 0, 0, 0.5)} 50% {box-shadow: 0 0 50px rgba(0, 255, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.3)} } @keyframes tickerScan {0% {transform: translateX(-100%)} 100% {transform: translateX(100%)} } @keyframes tickerLine {0%, 100% {opacity: 0.3;transform: scaleX(0.8)} 50% {opacity: 1;transform: scaleX(1)} } @keyframes tickerItemPulse {0%, 100% {transform: scale(1);filter: brightness(1)} 50% {transform: scale(1.02);filter: brightness(1.2)} } @keyframes tickerShimmer {0% {transform: translateX(-100%)} 100% {transform: translateX(100%)} } @keyframes tickerBorderRotate {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } @keyframes tickerParticle1 {0% {transform: translate(0, 50%) translateX(-100%);opacity: 0} 10% {opacity: 1} 90% {opacity: 1} 100% {transform: translate(0, 50%) translateX(100vw);opacity: 0} } @keyframes tickerParticle2 {0% {transform: translate(0, 30%) translateX(-100%);opacity: 0} 15% {opacity: 1} 85% {opacity: 1} 100% {transform: translate(0, 30%) translateX(100vw);opacity: 0} }  .footer {background: var(--bg-space);border-top: 2px solid var(--cyan);padding: var(--spacing-lg) 0 var(--spacing-sm)} .footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: var(--spacing-lg);margin-bottom: var(--spacing-lg)} .footer-title {color: var(--cyan);font-size: 1.5rem;margin-bottom: var(--spacing-sm);text-shadow: var(--glow-cyan)} .footer-subtitle {color: var(--magenta);font-size: 1.125rem;margin-bottom: var(--spacing-sm);text-shadow: var(--glow-magenta)} .footer-text {color: var(--text-secondary);line-height: 1.6} .footer-links {list-style: none} .footer-links li {margin-bottom: var(--spacing-xs)} .footer-links a {color: var(--text-secondary);text-decoration: none;transition: var(--transition-fast)} .footer-links a:hover {color: var(--cyan);text-shadow: var(--glow-cyan)} .social-links {display: flex;flex-direction: row;gap: var(--spacing-sm);align-items: center;justify-content: flex-start} .social-link {display: flex;width: 40px;height: 40px;background: rgba(0, 255, 255, 0.1);border: 2px solid var(--cyan);border-radius: 50%;align-items: center;justify-content: center;text-decoration: none;transition: var(--transition-normal);box-shadow: var(--glow-cyan);flex-shrink: 0} .social-link:hover {background: var(--cyan);color: var(--bg-dark);transform: translateY(-2px);box-shadow: 0 0 20px rgba(0, 255, 255, 0.8)} .footer-bottom {text-align: center;padding-top: var(--spacing-md);border-top: 1px solid rgba(0, 255, 255, 0.3);color: var(--text-muted)}  #particles-bg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;pointer-events: none}  @keyframes titlePulse {0% {text-shadow: var(--glow-cyan)} 100% {text-shadow: 0 0 25px rgba(0, 255, 255, 0.8)} } @keyframes gridMove {0% {transform: translate(0, 0)} 100% {transform: translate(30px, 30px)} } @keyframes scanMove {0% {transform: translateY(0)} 100% {transform: translateY(100vh)} }  .text-center {text-align: center} .text-cyan {color: var(--cyan)} .text-magenta {color: var(--magenta)} .text-green {color: var(--green)} .text-yellow {color: var(--yellow)} .text-orange {color: var(--orange)} .text-blue {color: var(--blue)} .glow-cyan {text-shadow: var(--glow-cyan)} .glow-magenta {text-shadow: var(--glow-magenta)} .glow-green {text-shadow: var(--glow-green)} .glow-yellow {text-shadow: var(--glow-yellow)} .glow-orange {text-shadow: var(--glow-orange)} .glow-blue {text-shadow: var(--glow-blue)}  .contact-hero {background: linear-gradient(135deg, var(--bg-space), var(--bg-charcoal));padding: 8rem 0 4rem;text-align: center;position: relative;overflow: hidden} .contact-form-section {padding: 4rem 0;background: var(--bg-dark)} .contact-grid {display: grid;grid-template-columns: 2fr 1fr;gap: 3rem;margin-top: 2rem} .contact-form-container {background: rgba(0, 0, 0, 0.3);border: 1px solid var(--cyan);border-radius: 1rem;padding: 2rem;position: relative;overflow: hidden} .contact-form-container::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.05) 50%, transparent 70%);animation: shimmer 3s ease-in-out infinite} .contact-form {position: relative;z-index: 1} .form-group {margin-bottom: 1.5rem;position: relative} .form-label {display: block;color: var(--cyan);font-weight: 600;margin-bottom: 0.5rem;text-shadow: var(--glow-cyan)} .form-input, .form-select, .form-textarea {width: 100%;padding: 1rem;background: rgba(0, 0, 0, 0.5);border: 1px solid var(--cyan);border-radius: 0.5rem;color: var(--text-primary);font-family: inherit;font-size: 1rem;transition: all 0.3s ease;position: relative} .form-input:focus, .form-select:focus, .form-textarea:focus {outline: none;border-color: var(--magenta);box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);background: rgba(0, 0, 0, 0.7)} .form-textarea {resize: vertical;min-height: 120px} .input-glow {position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 0.5rem;pointer-events: none;opacity: 0;transition: opacity 0.3s ease} .form-input:focus + .input-glow, .form-select:focus + .input-glow, .form-textarea:focus + .input-glow {opacity: 1;box-shadow: 0 0 20px rgba(0, 255, 255, 0.3)} .checkbox-label {display: flex;align-items: center;gap: 0.5rem;color: var(--text-secondary);cursor: pointer;font-size: 0.9rem} .form-checkbox {display: none} .checkmark {width: 1.2rem;height: 1.2rem;border: 2px solid var(--cyan);border-radius: 0.25rem;position: relative;transition: all 0.3s ease} .form-checkbox:checked + .checkmark {background: var(--cyan);box-shadow: var(--glow-cyan)} .form-checkbox:checked + .checkmark::after {content: '✓';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: var(--bg-dark);font-weight: bold} .form-submit {width: 100%;margin-top: 1rem} .contact-info {display: flex;flex-direction: column;gap: 1.5rem;max-width: 500px;margin: 0 auto;align-items: center;text-align: center} .info-card {background: rgba(0, 0, 0, 0.3);border: 1px solid var(--magenta);border-radius: 1rem;padding: 1.5rem;text-align: center;transition: all 0.3s ease;position: relative;overflow: hidden;width: 100%;max-width: 400px;margin: 0 auto} .info-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, transparent 30%, rgba(255, 0, 255, 0.05) 50%, transparent 70%);animation: shimmer 4s ease-in-out infinite} .info-card:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(255, 0, 255, 0.3)} .info-icon {font-size: 2rem;margin-bottom: 1rem;filter: drop-shadow(0 0 10px var(--magenta))} .info-title {color: var(--magenta);font-size: 1.1rem;font-weight: 600;margin-bottom: 0.5rem;text-shadow: var(--glow-magenta)} .info-text {color: var(--text-primary);font-weight: 500;margin-bottom: 0.25rem} .info-subtext {color: var(--text-secondary);font-size: 0.8rem} .social-title {color: var(--green);font-size: 1.1rem;font-weight: 600;margin-bottom: 1rem;text-shadow: var(--glow-green);text-align: center} .social-grid {display: flex;flex-direction: column;gap: 0.75rem;align-items: center;text-align: center;max-width: 400px;margin: 0 auto}  .follow-us-section {text-align: center} .follow-us-section .social-links {justify-content: center;margin-top: 1rem;gap: 1.5rem} .social-item {display: flex;flex-direction: column;align-items: center;gap: 0.5rem} .social-label {font-size: 0.75rem;color: var(--text-secondary);font-weight: 500;text-align: center;max-width: 40px;line-height: 1.2}  .map-section {padding: 4rem 0;background: var(--bg-space)} .map-container {margin-top: 2rem} .map-placeholder {background: rgba(0, 0, 0, 0.5);border: 2px solid var(--cyan);border-radius: 1rem;height: 400px;position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center} .map-grid {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.3} .grid-line {position: absolute;background: linear-gradient(90deg, transparent, var(--cyan), transparent);animation: gridMove 20s linear infinite} .grid-line:nth-child(1) {top: 25%;left: 0;width: 100%;height: 1px;animation-delay: 0s} .grid-line:nth-child(2) {top: 50%;left: 0;width: 100%;height: 1px;animation-delay: -5s} .grid-line:nth-child(3) {top: 0;left: 25%;width: 1px;height: 100%;animation-delay: -10s} .grid-line:nth-child(4) {top: 0;left: 50%;width: 1px;height: 100%;animation-delay: -15s} .map-marker {position: relative;z-index: 2} .marker-pulse {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;border: 2px solid var(--magenta);border-radius: 50%;animation: markerPulse 2s ease-in-out infinite} .marker-icon {font-size: 2rem;filter: drop-shadow(0 0 10px var(--magenta))} .map-info {position: absolute;bottom: 2rem;left: 2rem;background: rgba(0, 0, 0, 0.8);border: 1px solid var(--cyan);border-radius: 0.5rem;padding: 1rem;max-width: 300px} .map-title {color: var(--cyan);font-size: 1.1rem;font-weight: 600;margin-bottom: 0.5rem;text-shadow: var(--glow-cyan)} .map-address, .map-coordinates {color: var(--text-secondary);font-size: 0.9rem;margin-bottom: 0.25rem}  .faq-section {padding: 4rem 0;background: var(--bg-dark)} .faq-container {margin-top: 2rem;max-width: 800px;margin-left: auto;margin-right: auto} .faq-item {background: rgba(0, 0, 0, 0.3);border: 1px solid var(--cyan);border-radius: 0.5rem;margin-bottom: 1rem;overflow: hidden;transition: all 0.3s ease} .faq-item:hover {border-color: var(--magenta);box-shadow: 0 5px 20px rgba(255, 0, 255, 0.2)} .faq-question {width: 100%;background: none;border: none;padding: 1.5rem;color: var(--text-primary);font-size: 1rem;font-weight: 600;text-align: left;cursor: pointer;display: flex;justify-content: space-between;align-items: center;transition: all 0.3s ease} .faq-question:hover {background: rgba(0, 255, 255, 0.1)} .faq-question[aria-expanded="true"] {background: rgba(255, 0, 255, 0.1);border-bottom: 1px solid var(--magenta)} .question-text {color: var(--cyan);text-shadow: var(--glow-cyan)} .faq-icon {color: var(--magenta);font-size: 1.2rem;font-weight: bold;transition: transform 0.3s ease} .faq-question[aria-expanded="true"] .faq-icon {transform: rotate(45deg)} .faq-answer {padding: 0 1.5rem;max-height: 0;overflow: hidden;transition: max-height 0.3s ease, padding 0.3s ease} .faq-question[aria-expanded="true"] + .faq-answer {padding: 1.5rem} .faq-answer p {color: var(--text-secondary);line-height: 1.6;margin: 0}  .newsletter-section {padding: 4rem 0;background: linear-gradient(135deg, var(--bg-space) 0%, var(--bg-dark) 100%);text-align: center} .newsletter-content {max-width: 600px;margin: 0 auto} .newsletter-title {color: var(--green);font-size: 2rem;font-weight: 700;margin-bottom: 1rem;text-shadow: var(--glow-green)} .newsletter-subtitle {color: var(--text-secondary);font-size: 1.1rem;margin-bottom: 2rem;line-height: 1.6} .newsletter-form {margin-top: 2rem} .newsletter-input-group {display: flex;gap: 1rem;margin-bottom: 1rem} .newsletter-input {flex: 1;padding: 1rem;background: rgba(0, 0, 0, 0.5);border: 1px solid var(--green);border-radius: 0.5rem;color: var(--text-primary);font-family: inherit;font-size: 1rem;transition: all 0.3s ease} .newsletter-input:focus {outline: none;border-color: var(--cyan);box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);background: rgba(0, 0, 0, 0.7)} .newsletter-btn {padding: 1rem 2rem;white-space: nowrap} .newsletter-disclaimer {color: var(--text-secondary);font-size: 0.8rem;line-height: 1.4}  .mission-section, .story-section, .values-section, .team-section, .tech-section, .future-section {text-align: center;padding: var(--spacing-xl) 0;background: var(--bg-dark)} .mission-content, .story-content, .future-content {text-align: center} .mission-grid, .values-grid, .team-grid, .tech-grid, .future-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: var(--spacing-lg);margin-top: var(--spacing-lg)}  .team-grid {grid-template-columns: minmax(250px, 400px);justify-content: center;max-width: 500px;margin-left: auto;margin-right: auto} .mission-card, .value-card, .team-member, .tech-card, .future-card {text-align: center;padding: var(--spacing-lg);background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(20, 20, 20, 0.9));border: 2px solid rgba(138, 43, 226, 0.3);border-radius: var(--radius-lg);transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);position: relative;overflow: hidden;backdrop-filter: blur(10px);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 20px rgba(138, 43, 226, 0.1)} .mission-card::before, .value-card::before, .team-member::before, .tech-card::before, .future-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, transparent, rgba(138, 43, 226, 0.1), transparent);opacity: 0;transition: opacity 0.3s ease} .mission-card:hover, .value-card:hover, .team-member:hover, .tech-card:hover, .future-card:hover {transform: translateY(-8px) scale(1.02);border-color: var(--purple);box-shadow: 0 20px 40px rgba(138, 43, 226, 0.3), 0 0 30px rgba(138, 43, 226, 0.2)} .mission-card:hover::before, .value-card:hover::before, .team-member:hover::before, .tech-card:hover::before, .future-card:hover::before {opacity: 1} .mission-icon, .value-icon, .tech-icon {width: 80px;height: 80px;margin: 0 auto var(--spacing-md);background: linear-gradient(135deg, var(--purple), var(--pink));border-radius: 50%;display: flex;align-items: center;justify-content: center;position: relative;font-size: 2rem;box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);transition: all 0.3s ease} .mission-card:hover .mission-icon, .value-card:hover .value-icon, .tech-card:hover .tech-icon {transform: scale(1.1) rotate(5deg);box-shadow: 0 0 50px rgba(138, 43, 226, 0.8)} .mission-title, .value-title, .tech-title, .future-title {font-size: 1.25rem;font-weight: 700;color: var(--purple);margin-bottom: var(--spacing-sm);text-shadow: 0 0 20px rgba(138, 43, 226, 0.8);transition: all 0.3s ease;position: relative} .mission-card:hover .mission-title, .value-card:hover .value-title, .tech-card:hover .tech-title, .future-card:hover .future-title {color: var(--pink);text-shadow: 0 0 30px rgba(255, 20, 147, 0.8)} .mission-text, .value-text, .tech-text, .future-text {color: var(--text-secondary);line-height: 1.8;font-size: 1.1rem;transition: all 0.3s ease;position: relative;z-index: 1} .mission-card:hover .mission-text, .value-card:hover .value-text, .tech-card:hover .tech-text, .future-card:hover .future-text {color: var(--text-primary)}  .story-timeline {text-align: left;max-width: 800px;margin: 0 auto;position: relative} .timeline-item {display: flex;margin-bottom: var(--spacing-lg);position: relative} .timeline-marker {background: var(--cyan);color: var(--bg-dark);width: 60px;height: 60px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;margin-right: var(--spacing-md);flex-shrink: 0;box-shadow: var(--glow-cyan)} .timeline-content {flex: 1} .timeline-title {color: var(--cyan);font-size: 1.25rem;margin-bottom: var(--spacing-sm);text-shadow: var(--glow-cyan)} .timeline-text {color: var(--text-secondary);line-height: 1.6}  .member-avatar {width: 100px;height: 100px;margin: 0 auto var(--spacing-md);border-radius: 50%;background: var(--gradient-purple);display: flex;align-items: center;justify-content: center;font-size: 2.5rem} .member-name {color: var(--cyan);font-size: 1.25rem;margin-bottom: var(--spacing-xs);text-shadow: var(--glow-cyan)} .member-role {color: var(--magenta);font-weight: 600;margin-bottom: var(--spacing-sm);text-shadow: var(--glow-magenta)} .member-bio {color: var(--text-secondary);line-height: 1.6}  .future-cta {text-align: center;margin-top: var(--spacing-xl)} .future-message {color: var(--text-secondary);font-size: 1.1rem;margin-bottom: var(--spacing-lg);line-height: 1.6}  .privacy-content {padding: var(--spacing-xl) 0;background: var(--bg-dark)} .privacy-sections {max-width: 800px;margin: 0 auto} .privacy-section {margin-bottom: var(--spacing-xl);text-align: center} .privacy-section .section-title {text-align: center;margin-bottom: var(--spacing-lg)} .content-block {text-align: center;line-height: 1.6} .content-block h3 {color: var(--cyan);font-size: 1.25rem;margin-bottom: var(--spacing-sm);text-shadow: var(--glow-cyan)} .content-block p {color: var(--text-secondary);margin-bottom: var(--spacing-md)} .content-block ul {text-align: left;display: inline-block;margin: var(--spacing-md) auto;max-width: 600px} .content-block li {color: var(--text-secondary);margin-bottom: var(--spacing-xs);line-height: 1.6} .content-block strong {color: var(--magenta);text-shadow: var(--glow-magenta)}  .game-privacy {margin-top: var(--spacing-lg);padding: var(--spacing-md);background: var(--bg-charcoal);border: 1px solid var(--purple);border-radius: var(--radius-md);text-align: center} .game-privacy-title {color: var(--cyan);font-size: 1.25rem;margin-bottom: var(--spacing-sm);text-shadow: var(--glow-cyan)} .game-privacy-content {text-align: center} .game-privacy-content p {color: var(--text-secondary);margin-bottom: var(--spacing-sm);line-height: 1.6} .game-privacy-content ul {text-align: left;display: inline-block;margin: var(--spacing-sm) auto} .game-privacy-content li {color: var(--text-secondary);margin-bottom: var(--spacing-xs);line-height: 1.6}  .contact-info {text-align: center;margin: var(--spacing-md) 0} .contact-info p {color: var(--text-secondary);margin-bottom: var(--spacing-xs)}  .email-link {color: var(--cyan);text-decoration: none;transition: var(--transition-normal);text-shadow: var(--glow-cyan)} .email-link:hover {color: var(--magenta);text-shadow: var(--glow-magenta);text-decoration: underline}  .last-updated {text-align: center;margin-top: var(--spacing-md)} .update-label {color: var(--text-secondary);font-size: 0.9rem} .update-date {color: var(--cyan);font-weight: 600;margin-left: var(--spacing-xs);text-shadow: var(--glow-cyan)}  .contact-hero .hero-content, .contact-info-section .section-header, .contact-info-section .contact-info, .faq-section .section-header, .faq-section .faq-container, .newsletter-section .newsletter-content {text-align: center} .contact-info-section .section-header h2, .contact-info-section .section-header p, .faq-section .section-header h2, .faq-section .section-header p, .newsletter-section .newsletter-title, .newsletter-section .newsletter-subtitle {text-align: center}  .contact-info-section .container {display: flex;flex-direction: column;align-items: center;text-align: center} .contact-info {display: flex;flex-direction: column;gap: 1.5rem;max-width: 500px;margin: 0 auto;align-items: center;text-align: center;width: 100%} .info-card {background: rgba(0, 0, 0, 0.3);border: 1px solid var(--magenta);border-radius: 1rem;padding: 1.5rem;text-align: center;transition: all 0.3s ease;position: relative;overflow: hidden;width: 100%;max-width: 400px;margin: 0 auto}  .social-title {color: var(--green);font-size: 1.1rem;font-weight: 600;margin-bottom: 1rem;text-shadow: var(--glow-green);text-align: center} .social-grid {display: flex;flex-direction: column;gap: 0.75rem;align-items: center;text-align: center;max-width: 400px;margin: 0 auto}  .faq-question, .faq-answer {text-align: left} .faq-answer p {text-align: left}  .privacy-policy-section {margin-top: var(--spacing-md);text-align: center;padding: var(--spacing-md) 0;border-top: 1px solid rgba(0, 255, 255, 0.2)} .privacy-policy-section .btn {margin: 0 auto;display: inline-flex;align-items: center;gap: var(--spacing-xs)}  body:has(.privacy-content) .games-hero {padding-top: var(--spacing-xl);padding-bottom: var(--spacing-xl)} body:has(.privacy-content) .hero-content {margin-top: var(--spacing-lg)}  .lightbox-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);backdrop-filter: blur(10px);display: flex;align-items: center;justify-content: center;z-index: 10000;opacity: 0;visibility: hidden;transition: all 0.3s ease} .lightbox-overlay.active {opacity: 1;visibility: visible} .lightbox-content {position: relative;max-width: 90vw;max-height: 90vh;background: var(--bg-dark);border: 2px solid var(--cyan);border-radius: var(--radius-lg);box-shadow: 0 0 50px rgba(0, 255, 255, 0.5);overflow: hidden;transform: scale(0.8);transition: transform 0.3s ease} .lightbox-overlay.active .lightbox-content {transform: scale(1)} .lightbox-image {display: block;max-width: 100%;max-height: 80vh;width: auto;height: auto;object-fit: contain} .lightbox-caption {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));color: var(--text-primary);padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);text-align: center;font-family: var(--font-primary);font-size: 1.1rem;text-shadow: var(--glow-cyan)} .lightbox-close {position: absolute;top: var(--spacing-sm);right: var(--spacing-sm);width: 40px;height: 40px;background: rgba(0, 0, 0, 0.7);border: 2px solid var(--cyan);border-radius: 50%;color: var(--cyan);font-size: 1.5rem;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;z-index: 10001} .lightbox-close:hover {background: var(--cyan);color: var(--bg-dark);box-shadow: var(--glow-cyan);transform: scale(1.1)} .lightbox-nav {position: absolute;top: 50%;transform: translateY(-50%);width: 50px;height: 50px;background: rgba(0, 0, 0, 0.7);border: 2px solid var(--cyan);border-radius: 50%;color: var(--cyan);font-size: 1.5rem;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;z-index: 10001} .lightbox-nav:hover {background: var(--cyan);color: var(--bg-dark);box-shadow: var(--glow-cyan);transform: translateY(-50%) scale(1.1)} .lightbox-prev {left: var(--spacing-md)} .lightbox-next {right: var(--spacing-md)} .lightbox-counter {position: absolute;top: var(--spacing-sm);left: var(--spacing-sm);background: rgba(0, 0, 0, 0.7);border: 2px solid var(--cyan);border-radius: var(--radius-md);color: var(--cyan);padding: var(--spacing-xs) var(--spacing-sm);font-family: var(--font-primary);font-size: 0.9rem;text-shadow: var(--glow-cyan)}  .screenshot-img {cursor: pointer;transition: transform 0.3s ease} .screenshot-img:hover {transform: scale(1.05)} .hero-separator {width: 100%;height: 1px;background: #00FFFF;box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);position: relative;margin: 0;z-index: 10} .hero-separator::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 255, 0.9) 20%, rgba(0, 255, 255, 1) 50%, rgba(0, 255, 255, 0.9) 80%, transparent 100%);animation: separatorGlow 3s ease-in-out infinite alternate} .hero-separator::after {content: '';position: absolute;top: 50%;left: 0;width: 100%;height: 1px;background: linear-gradient(90deg, transparent 0%, rgba(0, 255, 255, 0.4) 25%, rgba(0, 255, 255, 0.8) 50%, rgba(0, 255, 255, 0.4) 75%, transparent 100%);transform: translateY(-50%);animation: separatorScan 2s linear infinite} @keyframes separatorGlow {0% {opacity: 0.7;transform: scaleX(0.9)} 100% {opacity: 1;transform: scaleX(1)}} @keyframes separatorScan {0% {transform: translateY(-50%) translateX(-100%)} 100% {transform: translateY(-50%) translateX(100%)}}