:root { --color-bg: #05050a; --color-section: #0a0a15; --color-primary: #00b7ff; --color-accent: #ff00ff; --color-green: #00ff90; --color-text: #e0e0e0; --color-muted: #888; --font-heading: 'Orbitron', sans-serif; --font-body: 'Montserrat', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-accent); } #hero { position: relative; height: 100vh; background: url('assets/hero-bg2.webp') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; isolation: isolate; } #hero canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } @supports (background-image: url('image.webp')) { } @supports not (background-image: url('image.webp')) { #hero { background-image: url('assets/hero-bg2.png'); } } #hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: radial-gradient(circle at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.8) 80%), repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 4px ); background-size: 100% 100%, 100% 8px; animation: scanLines 12s linear infinite; } #hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: repeating-linear-gradient(0deg, rgba(0, 183, 255, 0.15) 0px, rgba(0, 183, 255, 0.15) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(90deg, rgba(0, 183, 255, 0.15) 0px, rgba(0, 183, 255, 0.15) 1px, transparent 1px, transparent 50px); animation: moveGrid 40s linear infinite; } @keyframes moveGrid { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50px, -50px, 0); } } @keyframes scanLines { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 0, 0 8px; } } #hero .overlay { position: relative; z-index: 2; padding: 1rem; max-width: 90vw; } .logo { font-family: var(--font-heading); font-size: clamp(3rem, 10vw, 6rem); letter-spacing: 0.1em; margin-bottom: 1rem; color: var(--color-primary); } .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; } .glitch::before { left: 2px; text-shadow: -2px 0 var(--color-accent); animation: glitch-top 2.5s infinite linear alternate-reverse; clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); } .glitch::after { left: -2px; text-shadow: -2px 0 var(--color-green); animation: glitch-bottom 3s infinite linear alternate-reverse; clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%); } @keyframes glitch-top { 0% { transform: translate(0,0); } 15% { transform: translate(-3px, -3px) skew(0.2deg, 0.2deg); } 30% { transform: translate(3px, 2px) skew(-0.2deg, -0.1deg); } 45% { transform: translate(-4px, 1px) skew(0.1deg, -0.1deg); } 60% { transform: translate(2px, -2px) skew(-0.1deg, 0.1deg); } 75% { transform: translate(1px, 2px) skew(0.3deg, -0.2deg); } 100% { transform: translate(0,0); } } @keyframes glitch-bottom { 0% { transform: translate(0,0); } 15% { transform: translate(2px, 2px) skew(-0.2deg, 0.1deg); } 30% { transform: translate(-3px, -2px) skew(0.1deg, -0.2deg); } 45% { transform: translate(4px, 1px) skew(-0.1deg, 0.1deg); } 60% { transform: translate(-2px, -1px) skew(0.2deg, -0.1deg); } 75% { transform: translate(-1px, 3px) skew(0.1deg, 0.2deg); } 100% { transform: translate(0,0); } } .tagline { font-size: clamp(1rem, 3vw, 1.5rem); font-weight: 300; color: var(--color-text); margin-bottom: 2rem; text-shadow: 0 0 8px rgba(0,0,0,0.6); max-width: 90vw; line-height: 1.4; } .flicker { animation: flicker 4s infinite; } @keyframes flicker { 0%, 17%, 19%, 23%, 80%, 83%, 100% { opacity: 1; } 18%, 20%, 21%, 22%, 81%, 82% { opacity: 0.4; } } .cta-btn { display: inline-block; background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); padding: 0.75rem 2rem; border-radius: 4px; cursor: pointer; font-family: var(--font-heading); font-size: 0.875rem; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 0; } .cta-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color-primary); z-index: -1; transition: left 0.3s ease; } .cta-btn:hover::before { left: 0; } .cta-btn:hover { color: var(--color-bg); box-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary); } #about { background: var(--color-section); padding: 5rem 1rem; text-align: center; } #about .content-wrapper { max-width: 800px; margin: 0 auto; padding: 0 1rem; } #about h2 { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-accent); margin-bottom: 1rem; } #about p { font-size: 1.1rem; color: var(--color-text); line-height: 1.8; } #features { background: var(--color-bg); padding: 5rem 1rem; text-align: center; } #features h2 { font-family: var(--font-heading); font-size: 2.3rem; color: var(--color-accent); margin-bottom: 3rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; } .feature-item { background: var(--color-section); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 2rem 1.5rem; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-item::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(60deg, var(--color-primary), var(--color-accent), var(--color-green), var(--color-primary)); opacity: 0.05; transform: rotate(45deg); pointer-events: none; } .feature-item:hover { transform: translateY(-5px); box-shadow: 0 0 15px rgba(0, 255, 255, 0.2), 0 0 30px rgba(255, 0, 255, 0.2); } .feature-item img { width: 80px; height: 80px; margin: 0 auto 1rem; } .feature-item h3 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-primary); margin-bottom: 0.5rem; } .feature-item p { font-size: 0.9rem; color: var(--color-text); line-height: 1.5; } #sneak-peek { background: var(--color-section); padding: 5rem 1rem; text-align: center; } #sneak-peek h2 { font-family: var(--font-heading); font-size: 2.3rem; color: var(--color-accent); margin-bottom: 2rem; } .peek-wrapper { max-width: 1000px; margin: 0 auto; } .peek-wrapper img { border-radius: 12px; box-shadow: 0 0 15px rgba(0, 255, 255, 0.1), 0 0 25px rgba(255, 0, 255, 0.1); } .peek-wrapper .caption { margin-top: 1rem; font-size: 1rem; color: var(--color-green); } footer { background: var(--color-bg); padding: 4rem 1rem 2rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); } footer .footer-cta h2 { font-family: var(--font-heading); font-size: 2rem; color: var(--color-accent); margin-bottom: 1.5rem; } footer .footer-nav ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; margin-bottom: 1.5rem; } footer .footer-nav li a { font-size: 0.9rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; } footer .footer-nav li a:hover { color: var(--color-accent); } footer .copyright { font-size: 0.8rem; color: var(--color-muted); margin-top: 1rem; } #placeholders { background: var(--color-section); padding: 4rem 1rem; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; } .placeholder-section { flex: 1 1 280px; max-width: 320px; border: 1px dashed var(--color-accent); border-radius: 8px; padding: 2rem 1.5rem; text-align: center; background: rgba(255,255,255,0.02); box-shadow: 0 0 10px rgba(0,255,255,0.05), 0 0 20px rgba(255,0,255,0.05); transition: box-shadow 0.3s ease; } .placeholder-section:hover { box-shadow: 0 0 10px rgba(0,255,255,0.15), 0 0 25px rgba(255,0,255,0.15); } .placeholder-section h3 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-green); margin-bottom: 0.75rem; } .placeholder-section p { font-size: 0.85rem; color: var(--color-text); line-height: 1.5; } @media (max-width: 768px) { #about, #features, #sneak-peek { padding: 4rem 1rem; } .feature-item { padding: 1.5rem 1rem; } footer .footer-nav ul { gap: 1rem; } .cta-btn { padding: 0.6rem 1.5rem; font-size: 0.75rem; } } @media (max-width: 480px) { .logo { font-size: 2.5rem; } .tagline { font-size: 0.9rem; } #about h2, #features h2, #sneak-peek h2 { font-size: 1.8rem; } } .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 1000; } .modal.show { display: flex; } .modal-dialog { background: var(--color-section); border: 1px solid var(--color-accent); border-radius: 10px; padding: 2rem 1.5rem; width: 90%; max-width: 420px; color: var(--color-text); position: relative; box-shadow: 0 0 20px rgba(255, 0, 255, 0.2), 0 0 40px rgba(0, 183, 255, 0.2); } .modal-close { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: var(--color-accent); font-size: 1.5rem; cursor: pointer; line-height: 1; } .modal-close:focus { outline: 2px solid var(--color-primary); } #signup-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; } #signup-form label { font-size: 0.85rem; font-weight: 500; text-align: left; } #signup-form input { padding: 0.6rem; border: 1px solid var(--color-primary); border-radius: 4px; background: transparent; color: var(--color-text); font-size: 0.95rem; } #signup-form input:focus { outline: none; box-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-accent); } .signup-thanks { margin-top: 1rem; font-size: 0.9rem; color: var(--color-green); text-align: center; } [data-animate] { opacity: 0; transform: translateY(60px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; } [data-animate].in-view { opacity: 1; transform: translateY(0); }