/* ========================================= */
/* 1. GLOBAL VARIABLES & RESETS              */
/* ========================================= */
:root { 
    --bg-color: #050505; 
    --text-main: #F9F9F9; 
    --tech-cyan: #00F3FF; 
    --film-amber: #FF8A00; 
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    cursor: none; /* Default hide for desktop */
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
}

h1, h2, h3, .sync-font { 
    font-family: 'Syncopate', sans-serif; 
    text-transform: uppercase; 
}

/* ========================================= */
/* 2. CUSTOM CURSOR (DESKTOP ONLY)           */
/* ========================================= */
@media (hover: hover) and (pointer: fine) {
    .cursor-dot { 
        width: 8px; height: 8px; background-color: var(--text-main); border-radius: 50%; 
        position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); 
    }
    
    .cursor-glow { 
        width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(5,5,5,0) 70%); 
        border-radius: 50%; position: fixed; pointer-events: none; z-index: 1; 
        transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s; 
    }
}

/* Hide custom cursor entirely on touch/mobile devices to restore default touch behavior */
@media (hover: none) {
    * { cursor: auto; }
    .cursor-dot, .cursor-glow { display: none !important; }
}

/* ========================================= */
/* 3. NAVIGATION & TOP LEGAL LINKS           */
/* ========================================= */
nav { 
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); 
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.1); padding: 15px 40px; border-radius: 50px; 
    z-index: 100; display: flex; gap: 30px; transition: opacity 0.3s;
}

nav a { 
    color: var(--text-main); text-decoration: none; font-size: 0.9rem; 
    letter-spacing: 1px; transition: color 0.3s; 
}

nav a:hover, nav a.active { color: var(--tech-cyan); }

.top-legal {
    position: absolute; top: 50px; right: 5vw; z-index: 100; display: flex; gap: 20px;
}

.top-legal a {
    color: rgba(255, 255, 255, 0.4); font-family: 'Syncopate', sans-serif; font-size: 0.6rem;
    text-transform: uppercase; letter-spacing: 2px; text-decoration: none; transition: color 0.3s;
}

.top-legal a:hover { color: var(--text-main); }

/* ========================================= */
/* 4. HOME PAGE (INDEX.HTML)                 */
/* ========================================= */
.hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; z-index: 10; overflow: hidden; }
.hero-logo { width: clamp(250px, 40vw, 600px); margin-bottom: 30px; filter: drop-shadow(0px 10px 30px rgba(0,0,0,0.5)); position: relative; z-index: 5; }
.hero-sub { font-size: 1.2rem; font-weight: 600; color: var(--tech-cyan); letter-spacing: 1px; position: relative; z-index: 5; text-shadow: 0px 0px 15px rgba(0, 243, 255, 0.3); }

.floating-icon { position: absolute; opacity: 0.8; z-index: 1; animation: slowFloat 6s ease-in-out infinite alternate; }
.icon-1 { top: 15%; left: 25%; width: clamp(90px, 14vw, 160px); animation-delay: 0s; }
.icon-2 { bottom: 25%; left: 15%; width: clamp(40px, 8vw, 90px); animation-delay: 1.5s; }
.icon-3 { top: 20%; right: 12%; width: clamp(70px, 12vw, 140px); animation-delay: 3s; }
.icon-4 { bottom: 20%; right: 10%; width: clamp(50px, 9vw, 100px); animation-delay: 4.5s; }

@keyframes slowFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-20px) rotate(5deg); }
}

.scroll-wrapper { position: absolute; top: 50px; left: 5vw; z-index: 20; }
.scroll-indicator { font-family: 'Syncopate', sans-serif; font-size: 0.55rem; letter-spacing: 2px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; white-space: nowrap; transform: rotate(90deg); transform-origin: top left; animation: scrollBob 2s infinite ease-in-out; }
@keyframes scrollBob { 0%, 100% { transform: rotate(90deg) translateX(0); color: rgba(255, 255, 255, 0.4); } 50% { transform: rotate(90deg) translateX(10px); color: var(--tech-cyan); } }

.duality { min-height: 100vh; display: flex; flex-direction: column; padding: 100px 5%; z-index: 10; position: relative; }
@media (min-width: 768px) { .duality { flex-direction: row; } }
.half { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px; border: 1px solid rgba(255,255,255,0.05); transition: background 0.5s; }
.tech-side:hover { background: radial-gradient(circle at center, rgba(0, 243, 255, 0.05) 0%, transparent 70%); }
.film-side:hover { background: radial-gradient(circle at center, rgba(255, 138, 0, 0.05) 0%, transparent 70%); }
.half h2 { font-size: 2.5rem; margin-bottom: 20px; }
.tech-side h2 span { color: var(--tech-cyan); }
.film-side h2 span { color: var(--film-amber); }
.half p { font-size: 1.1rem; line-height: 1.6; opacity: 0.8; margin-bottom: 30px; }
.btn { padding: 15px 30px; background: transparent; border: 1px solid var(--text-main); color: var(--text-main); font-family: 'Inter', sans-serif; font-weight: 600; border-radius: 4px; align-self: flex-start; transition: all 0.3s; }
.tech-side .btn:hover { background: var(--tech-cyan); color: #000; border-color: var(--tech-cyan); }
.film-side .btn:hover { background: var(--film-amber); color: #000; border-color: var(--film-amber); }

/* ========================================= */
/* 5. PRODUCTS PAGE & MODAL OVERLAY          */
/* ========================================= */
.dashboard { max-width: 1400px; margin: 80px auto 150px; padding: 0 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; position: relative; z-index: 10; }
.column-header { font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 30px; opacity: 0.7; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }
.col-apps .column-header span { color: var(--tech-cyan); }
.col-programs .column-header span { color: var(--film-amber); }
.column-content { display: flex; flex-direction: column; gap: 20px; }

.card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 40px; position: relative; overflow: hidden; transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s; }
.card.app { height: 220px; display: flex; flex-direction: column; justify-content: center; }
.card.program { height: 460px; display: flex; flex-direction: column; justify-content: flex-end; }
.card:hover { transform: translateY(-5px); }
.card.app:hover { border-color: var(--tech-cyan); background: radial-gradient(circle at top right, rgba(0, 243, 255, 0.05), transparent 60%); }
.card.program:hover { border-color: var(--film-amber); background: radial-gradient(circle at top right, rgba(255, 138, 0, 0.05), transparent 60%); }
.card h2, .card p { z-index: 2; position: relative; pointer-events: none; }
.card h2 { font-size: 1.8rem; margin-bottom: 10px; }
.card p { font-size: 0.95rem; opacity: 0.7; line-height: 1.6; max-width: 80%; }
.card-os { position: absolute; top: 20px; right: 25px; font-family: 'Syncopate', sans-serif; opacity: 0.05; font-weight: 700; transition: opacity 0.4s, transform 0.4s; text-align: right; line-height: 1; z-index: 1; pointer-events: none; }
.card:hover .card-os { opacity: 0.15; transform: scale(1.05); }
.card.app .card-os { color: var(--tech-cyan); font-size: 3.5rem; }
.card.program .card-os { color: var(--film-amber); font-size: 2.2rem; right: 20px; }

/* Product Modal */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(20px); z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-container { width: 90%; max-width: 1000px; height: 70vh; min-height: 500px; background: rgba(20, 20, 20, 0.9); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; display: flex; overflow: hidden; position: relative; transform: translateY(50px); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.modal-overlay.active .modal-container { transform: translateY(0); }
.modal-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: center; align-items: center; font-family: 'Inter', sans-serif; font-size: 1.2rem; color: #fff; background: transparent; z-index: 10; transition: background 0.3s, color 0.3s; }
.modal-close:hover { background: #fff; color: #000; }
.modal-visual { flex: 1; background: rgba(0,0,0,0.5); border-right: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: center; align-items: center; position: relative; }
.visual-placeholder { border: 1px dashed rgba(255,255,255,0.2); width: 200px; height: 200px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.9rem; opacity: 0.5; text-align: center; padding: 20px; }
.modal-info { flex: 1; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; }
.modal-os { font-family: 'Syncopate', sans-serif; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 10px; }
.modal-title { font-size: 2.5rem; margin-bottom: 20px; line-height: 1.1; }
.modal-desc { font-size: 1rem; opacity: 0.8; line-height: 1.6; margin-bottom: 30px; }
.modal-features { list-style: none; margin-bottom: 40px; }
.modal-features li { font-size: 0.9rem; opacity: 0.9; margin-bottom: 10px; padding-left: 20px; position: relative; }
.modal-features li::before { content: '▹'; position: absolute; left: 0; color: inherit; font-size: 1.2rem; top: -2px; }
.modal-btn { padding: 15px 30px; background: #fff; color: #000; border: none; border-radius: 4px; font-family: 'Inter', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; align-self: flex-start; transition: opacity 0.3s; }
.modal-btn:hover { opacity: 0.8; }

.theme-app .modal-os { color: var(--tech-cyan); }
.theme-app .modal-features li::before { color: var(--tech-cyan); }
.theme-program .modal-os { color: var(--film-amber); }
.theme-program .modal-features li::before { color: var(--film-amber); }

/* ========================================= */
/* 6. MEDIA PAGE                             */
/* ========================================= */
.page-header { margin: 100px 5% 40px; position: relative; z-index: 10; text-align: center; }
.page-header h1 { font-size: 4rem; letter-spacing: 4px; color: var(--tech-cyan); text-shadow: 0 0 20px rgba(0, 243, 255, 0.2); }
.feed-container { max-width: 1400px; margin: 0 auto 150px; padding: 0 5%; display: flex; flex-direction: column; gap: 60px; position: relative; z-index: 10; }

.featured-post { width: 100%; height: 50vh; min-height: 400px; border-radius: 16px; overflow: hidden; position: relative; display: flex; align-items: flex-end; padding: 50px; border: 1px solid rgba(255,255,255,0.05); }
.featured-post .post-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(5,5,5,0.1), rgba(5,5,5,0.9)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="%23111"/><text x="50%" y="50%" font-family="sans-serif" font-size="24" fill="%23333" text-anchor="middle">Featured Hero Content</text></svg>'); background-size: cover; background-position: center; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); z-index: 0; }
.featured-post:hover .post-bg { transform: scale(1.05); }
.featured-content { position: relative; z-index: 2; max-width: 800px; }
.featured-content h2 { font-size: 3rem; line-height: 1.1; margin-bottom: 15px; }
.featured-content p { font-size: 1.1rem; opacity: 0.8; margin-bottom: 25px; line-height: 1.6; }

.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.post-card { display: flex; flex-direction: column; }
.post-image-container { width: 100%; height: 300px; border-radius: 12px; overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.05); position: relative; background: #0a0a0a; }
.post-image-container .post-bg { width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="%231a1a1a"/><text x="50%" y="50%" font-family="sans-serif" font-size="16" fill="%23444" text-anchor="middle">Media Thumbnail</text></svg>'); background-size: cover; background-position: center; transition: transform 0.6s ease; opacity: 0.7; }
.post-card:hover .post-bg { transform: scale(1.08); opacity: 1; }
.post-card h3 { font-size: 1.5rem; margin-bottom: 10px; line-height: 1.2; transition: color 0.3s; }
.post-card:hover h3 { color: var(--tech-cyan); }
.post-card p { font-size: 0.95rem; opacity: 0.7; line-height: 1.6; margin-bottom: 20px; }
.post-meta { font-size: 0.8rem; opacity: 0.5; font-family: 'Syncopate', sans-serif; letter-spacing: 1px; }

.btn-read { display: inline-block; padding: 10px 0; color: var(--text-main); text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; position: relative; width: max-content; }
.btn-read::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 0%; height: 1px; background: var(--text-main); transition: width 0.3s ease; }
.post-card:hover .btn-read::after, .featured-post:hover .btn-read::after { width: 100%; }

/* ========================================= */
/* 7. SUPPORT PAGE                           */
/* ========================================= */
.support-container { max-width: 800px; margin: 0 auto 150px; padding: 50px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; position: relative; z-index: 10; backdrop-filter: blur(10px); }
.support-form { display: flex; flex-direction: column; gap: 35px; }
.input-row { display: flex; gap: 30px; }
.input-group { position: relative; flex: 1; }

input, textarea, select { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-main); font-family: 'Inter', sans-serif; font-size: 1rem; padding: 10px 0; outline: none; transition: border-color 0.3s; resize: none; }
select { cursor: none; appearance: none; border-radius: 0; color: rgba(255, 255, 255, 0.7); }
select option { background-color: #111; color: var(--text-main); }
input:focus, textarea:focus, select:focus { border-bottom-color: var(--tech-cyan); }

label { position: absolute; top: 10px; left: 0; font-family: 'Syncopate', sans-serif; font-size: 0.8rem; letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); pointer-events: none; transition: transform 0.3s ease, color 0.3s ease, font-size 0.3s ease; }
input:focus ~ label, input:not(:placeholder-shown) ~ label, textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label { transform: translateY(-25px); font-size: 0.65rem; color: var(--tech-cyan); }

.select-wrapper::after { content: '▼'; position: absolute; right: 0; top: 15px; font-size: 0.6rem; color: rgba(255, 255, 255, 0.4); pointer-events: none; }
.submit-btn { padding: 18px 40px; background: transparent; border: 1px solid var(--text-main); color: var(--text-main); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; border-radius: 4px; align-self: flex-start; transition: all 0.3s; margin-top: 10px; }
.submit-btn:hover { background: var(--text-main); color: #000; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); }

/* ========================================= */
/* 8. MOBILE RESPONSIVENESS                  */
/* ========================================= */
@media (max-width: 900px) {
    /* Navbar / Header Adjustments */
    nav { padding: 15px 20px; gap: 20px; width: 90%; justify-content: center; }
    .page-header h1 { font-size: 3rem; }
    
    /* Product Page Layout */
    .dashboard { grid-template-columns: 1fr; margin-bottom: 120px; }
    .card.program { height: 300px; }
    
    /* Product Modal Adjustments */
    .modal-container { flex-direction: column; height: 85vh; overflow-y: auto; }
    .modal-visual { min-height: 250px; flex: none; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .modal-info { padding: 40px 30px; }
    .modal-title { font-size: 2rem; }
    
    /* Media Page Layout */
    .post-grid { grid-template-columns: 1fr; }
    .post-image-container { height: 220px; }
}

@media (max-width: 768px) {
    /* Support Form Breakdown */
    .input-row { flex-direction: column; gap: 35px; } 
    .support-container { padding: 40px 25px; margin: 0 5% 150px; } 
}

/* ========================================= */
/* 9. STATIC FORM INPUTS & LABELS            */
/* ========================================= */

.input-group { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 25px; 
    width: 100%;
}

label { 
    position: static !important; /* Forces label out of the box */
    font-family: 'Syncopate', sans-serif; 
    font-size: 0.75rem !important; 
    letter-spacing: 1px; 
    color: rgba(255, 255, 255, 0.6) !important; 
    margin-bottom: 10px; 
    pointer-events: auto !important;
    transform: none !important; /* Kills the floating animation */
}

/* Upgrading the inputs to full boxes instead of just underlines */
input[type="text"], input[type="email"], input[type="password"], textarea, select { 
    width: 100%; 
    background: rgba(0, 0, 0, 0.4) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    color: var(--text-main); 
    font-family: 'Inter', sans-serif; 
    font-size: 1rem; 
    padding: 12px 15px !important; 
    border-radius: 6px; 
    outline: none; 
    transition: border-color 0.3s, box-shadow 0.3s; 
}

/* Glow effect when clicked */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus { 
    border-color: var(--tech-cyan) !important; 
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}