:root { --bg-color: #050505; --text-color: #e5e5e5; }
        body { margin: 0; overflow-x: hidden; background-color: var(--bg-color); color: var(--text-color); font-family: 'Manrope', sans-serif; }
        h1, h2, h3 { font-family: 'Syncopate', sans-serif; }
        
        #canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; }
        
        .section { min-height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 2rem; pointer-events: none; }
        .content-box { pointer-events: auto; opacity: 0; transform: translateY(30px); }
        
        /* Glassmorphism */
        .glass-panel { background: rgba(20, 20, 20, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
        
        /* UI Utilities */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-color); }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
        
        .loading-overlay { position: fixed; inset: 0; background: #000; z-index: 50; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease; }
        
        .modal-open { overflow: hidden; }

        .contact-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
        .contact-modal.is-open { opacity: 1; pointer-events: auto; }
        .contact-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
        .contact-dialog { position: relative; width: min(100%, 560px); max-height: calc(100vh - 3rem); overflow-y: auto; padding: 2rem; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45); transform: translateY(18px) scale(0.98); transition: transform 0.3s ease; }
        .contact-modal.is-open .contact-dialog { transform: translateY(0) scale(1); }
        #initiate-btn, .contact-close, .contact-submit { cursor: pointer; }
        .contact-close { position: absolute; top: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 1.5rem; line-height: 1; }
        .contact-close:hover, .contact-submit:hover { background: #fff; color: #000; }
        .contact-kicker { margin: 0 0 0.75rem; color: #60a5fa; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.35em; }
        .contact-dialog h2 { margin: 0 2.5rem 1.5rem 0; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; }
        .contact-dialog form { display: grid; gap: 1rem; }
        .contact-dialog label { display: grid; gap: 0.45rem; color: #cbd5e1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
        .contact-dialog input, .contact-dialog select, .contact-dialog textarea { width: 100%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(2, 6, 23, 0.72); color: #f8fafc; padding: 0.85rem 0.95rem; font: inherit; outline: none; }
        .contact-dialog textarea { resize: vertical; min-height: 120px; }
        .contact-dialog input:focus, .contact-dialog select:focus, .contact-dialog textarea:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18); }
        .contact-status { min-height: 1.25rem; margin: 0; color: #93c5fd; font-size: 0.9rem; }
        .contact-status.is-error { color: #fca5a5; }
        .contact-submit { justify-self: start; border: 1px solid #fff; color: #fff; padding: 0.9rem 1.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.24em; transition: background 0.2s ease, color 0.2s ease; }

        @media (max-width: 520px) {
            .contact-dialog { padding: 1.5rem; }
            .contact-submit { width: 100%; }
        }