:root{--bg-color:#05050a;--bg-gradient:radial-gradient(circle at center, #1a0033 0%, #05050a 100%);--primary-cyan:#00f2ff;--primary-cyan-glow:#00f2ff80;--secondary-purple:#bf00ff;--secondary-purple-glow:#bf00ff80;--text-color:#e0fbff;--text-dim:#e0fbffb3;--font-main:"Montserrat", sans-serif;--font-accent:"Orbitron", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-color);background:var(--bg-gradient);color:var(--text-color);font-family:var(--font-main);min-height:100vh;overflow-x:hidden}#app{z-index:1;position:relative}#chaos-canvas{z-index:-1;opacity:.4;width:100%;height:100%;position:fixed;top:0;left:0}header{z-index:10;width:100%;padding:2rem;position:absolute}nav{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;display:flex}.logo-link{align-items:center;text-decoration:none;transition:transform .3s;display:flex}.logo-link:hover{transform:scale(1.05)}.header-logo{width:auto;height:50px;filter:drop-shadow(0 0 5px var(--primary-cyan-glow))}nav ul{gap:2rem;list-style:none;display:flex}nav a{color:var(--text-color);text-transform:uppercase;letter-spacing:2px;font-size:.8rem;text-decoration:none;transition:all .3s}nav a:hover{color:var(--primary-cyan);text-shadow:0 0 8px var(--primary-cyan-glow)}#hero{text-align:center;justify-content:center;align-items:center;height:100vh;padding:2rem;display:flex}.hero-content{max-width:800px}.main-logo{filter:drop-shadow(0 0 20px #00f2ff4d);max-width:100%;height:auto;margin-bottom:2rem;animation:6s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.tagline{font-family:var(--font-main);letter-spacing:8px;color:var(--text-dim);text-transform:lowercase;margin-bottom:1.5rem;font-size:1.2rem;font-weight:300}.description{color:var(--text-dim);max-width:600px;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;font-size:1rem;line-height:1.6}.cta-buttons{justify-content:center;gap:1.5rem;display:flex}.btn{text-transform:uppercase;font-family:var(--font-accent);letter-spacing:2px;border:1px solid #0000;border-radius:4px;padding:1rem 2rem;font-size:.8rem;text-decoration:none;transition:all .3s}.btn-primary{background-color:var(--primary-cyan);color:var(--bg-color);box-shadow:0 0 15px var(--primary-cyan-glow)}.btn-primary:hover{color:var(--primary-cyan);border-color:var(--primary-cyan);box-shadow:0 0 25px var(--primary-cyan-glow);background-color:#0000}.btn-secondary{border-color:var(--secondary-purple);color:var(--secondary-purple)}.btn-secondary:hover{background-color:var(--secondary-purple);color:var(--text-color);box-shadow:0 0 20px var(--secondary-purple-glow)}#about,#sounds,#contact{padding:100px 2rem;position:relative}#about{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0d001a66;border-top:1px solid #bf00ff1a;border-bottom:1px solid #bf00ff1a}.container{text-align:center;max-width:1000px;margin:0 auto}h2{font-family:var(--font-accent);color:var(--primary-cyan);text-shadow:0 0 15px var(--primary-cyan-glow);text-transform:uppercase;letter-spacing:4px;margin-bottom:3rem;font-size:2.5rem}#about p{color:var(--text-dim);max-width:800px;margin:0 auto;font-size:1.2rem;line-height:1.8}.sound-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:2rem;display:grid}.sound-card{cursor:pointer;background:#ffffff08;border:1px solid #e0fbff1a;border-radius:8px;padding:3rem 2rem;transition:all .4s}.sound-card:hover{border-color:var(--primary-cyan);background:#00f2ff0d;transform:translateY(-10px);box-shadow:0 10px 30px #00f2ff1a}.sound-icon{margin-bottom:1.5rem;font-size:3rem}.sound-card h3{font-family:var(--font-accent);color:var(--text-color);margin-bottom:1rem}.sound-card p{color:var(--text-dim);font-size:.9rem}#contact{background:#bf00ff0d}#contact h2{color:var(--secondary-purple);text-shadow:0 0 15px var(--secondary-purple-glow)}#contact p{margin-bottom:3rem;font-size:1.2rem}.contact-email{margin-bottom:2rem!important}.contact-email a{color:var(--primary-cyan);font-family:var(--font-accent);letter-spacing:1px;font-size:1.1rem;text-decoration:none;transition:all .3s}.contact-email a:hover{color:var(--secondary-purple);text-shadow:0 0 10px var(--secondary-purple-glow)}footer{text-align:center;color:var(--text-dim);padding:4rem 2rem;font-size:.8rem}@media (width<=768px){.tagline{letter-spacing:4px;font-size:1rem}.cta-buttons{flex-direction:column}}