:root { 
    --bg: #fdfdfd; 
    --accent: #000; 
    --success: #6366f1; 
    --muted: #888; 
    --glass: rgba(255, 255, 255, 0.85);
}

html { scroll-behavior: smooth; }
body, html { 
    margin: 0; padding: 0; width: 100%; 
    background-color: var(--bg); 
    font-family: 'Inter', sans-serif; 
    color: var(--accent);
    overflow-x: hidden;
}

/* Cursor */
#custom-cursor { 
    position: fixed; top: 0; left: 0; width: 25px; height: 25px; 
    border: 1px solid rgba(0,0,0,0.15); border-radius: 50%; 
    pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); 
    display: flex; align-items: center; justify-content: center; 
}
#custom-cursor::after { content: ''; width: 3px; height: 3px; background: black; border-radius: 50%; }

/* Ticker Fix */
#ticker-wrap { 
    position: fixed; top: 0; width: 100%; 
    background: var(--glass); backdrop-filter: blur(12px); 
    z-index: 100; border-bottom: 1px solid rgba(0,0,0,0.05); 
    padding: 12px 0; font-size: 0.65rem; font-weight: 700; 
    display: flex; overflow: hidden; 
}
.ticker-move { 
    display: flex; white-space: nowrap; 
    animation: ticker-scroll 60s linear infinite; 
    width: max-content;
}
.ticker-item { 
    padding: 0 40px; text-transform: uppercase; 
    letter-spacing: 1px; color: var(--muted); 
    display: flex; align-items: center;
}
.ticker-item span.price { color: #000; margin: 0 5px; }
.ticker-item span.up { color: #10b981; } .ticker-item span.down { color: #ef4444; }

@keyframes ticker-scroll { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* Hero Section */
#hero-container { 
    position: relative; width: 100%; height: 100vh; 
    overflow: hidden; display: flex; align-items: center; justify-content: center; 
}
canvas { display: block; position: absolute; top: 0; left: 0; z-index: 1; outline: none; }

#ui-layer { position: relative; z-index: 10; text-align: center; pointer-events: none; }

.logo { 
    width: 480px; 
    max-width: 85vw; 
    margin-bottom: 1rem; 
    pointer-events: auto; 
}

.coming-soon { 
    font-weight: 300; font-size: 0.7rem; letter-spacing: 10px; 
    color: var(--muted); margin-top: 10px; text-transform: uppercase; 
}

/* Waitlist Form */
.form-area { 
    margin-top: 50px; pointer-events: auto; 
    width: 320px; position: relative; margin-left: auto; margin-right: auto; 
}
.waitlist-form { display: flex; border: 1.5px solid #000; background: #fff; }
input[type="email"] { 
    flex: 1; border: none; padding: 15px; font-size: 0.8rem; outline: none; 
    font-family: 'JetBrains Mono', monospace;
}
.submit-btn { 
    background: #000; color: #fff; border: none; padding: 0 25px; 
    font-weight: 700; cursor: pointer; 
}
#success-msg { 
    position: absolute; top: 70px; width: 100%; opacity: 0; 
    color: var(--success); font-size: 0.7rem; letter-spacing: 1px; 
    transition: 0.5s; pointer-events: none; 
}
#success-msg.active { opacity: 1; transform: translateY(10px); }

/* Terminal */
#terminal { 
    position: fixed; bottom: 80px; left: 30px; z-index: 100; 
    font-family: 'JetBrains Mono', monospace; font-size: 9px; 
    color: #bbb; text-align: left; max-width: 250px; pointer-events: none; 
}

/* Legal Section */
#legal-section { 
    position: relative; z-index: 20; background: #fff; 
    padding: 120px 5vw; border-top: 1px solid #eee; 
}
.legal-wrapper { max-width: 800px; margin: 0 auto; }
.legal-block { margin-bottom: 80px; }
.legal-block h2 { 
    font-size: 1.2rem; letter-spacing: 4px; font-weight: 700; 
    text-transform: uppercase; margin-bottom: 25px; 
    border-bottom: 1px solid #000; display: block; padding-bottom: 10px; 
}
.legal-block p { font-size: 0.85rem; line-height: 2; color: #666; margin-bottom: 24px; }
.legal-block h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #000; margin-top: 40px; }

/* Footer */
#footer-nav { 
    background: #fff; padding: 60px 0; text-align: center; 
    font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; 
    color: var(--muted); border-top: 1px solid #eee; 
}
#footer-nav a { color: var(--accent); text-decoration: none; margin: 0 15px; }

/* Mobile */
@media (max-width: 768px) {
    .logo { width: 300px; }
    #terminal { display: none; }
}