html {
    scroll-behavior: smooth;
}

:root {
    --bg-dark: #0b0d10;
    --bg-panel: rgba(20, 25, 30, 0.7);
    --primary: #FF8C00;      /* Safety Orange */
    --cyan: #00f3ff;         /* Sci-Fi Cyan accent */
    --text-main: #e0e6ed;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.1);
    --success: #22c55e;
    --danger: #ef4444;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Rajdhani', sans-serif;
    overflow-x: hidden;
    width: 100vw;
}

#canvas-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.6; }

/* HUD Lines */
.hud-line { position: fixed; background: var(--border); z-index: 10; }
.hud-line.top { top: 80px; left: 5%; width: 90%; height: 1px; }
.hud-line.left { top: 5%; left: 5%; width: 1px; height: 90%; }

.hud-corner {
    position: fixed; width: 20px; height: 20px; border: 2px solid var(--cyan);
    z-index: 10; opacity: 0.5;
    animation: colorShift 10s infinite alternate ease-in-out;
}
.tl { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.tr { top: 20px; right: 20px; border-left: 0; border-bottom: 0; }
.bl { bottom: 20px; left: 20px; border-right: 0; border-top: 0; }
.br { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }

/* NAVIGATION */
nav {
    position: fixed; top: 0; width: 100%; padding: 15px 50px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100; backdrop-filter: blur(10px); background: rgba(11, 13, 16, 0.85);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.brand-container {
    display: flex; align-items: center; gap: 15px; text-decoration: none;
}
.logo-img {
    height: 45px; width: auto; display: block;
}
.brand-text {
    display: flex; flex-direction: column; justify-content: center;
}
.brand-name {
    font-family: 'Saira Stencil One', cursive; font-size: 1.8rem; 
    color: white; line-height: 1; text-transform: uppercase;
}
.brand-tagline {
    font-size: 0.75rem; letter-spacing: 2px; color: var(--text-muted); 
    text-transform: uppercase; font-weight: 700; font-family: 'Rajdhani', sans-serif;
}

/* SECTIONS */
section {
    padding: 120px 5%;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.section-header { margin-bottom: 50px; border-left: 4px solid var(--primary); padding-left: 20px; }
.section-title { font-size: 3rem; text-transform: uppercase; margin: 0; line-height: 1; }
.section-sub { font-family: 'Roboto', sans-serif; color: var(--text-muted); margin-top: 10px; font-size: 1.1rem; }

/* FOOTER */
footer {
    border-top: 1px solid var(--border); padding: 20px 0; text-align: center;
    background: black; position: relative; z-index: 10;
}
.tpt-powered {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    opacity: 0.7; margin-top: 30px; font-family: 'Roboto';
}

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--primary); z-index: 1000; width: 0%; }

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .hud-line, .hud-corner {
        display: none; /* Hide decorative HUD elements on mobile */
    }
    
    * { cursor: auto !important; } /* Restore default cursor for touch devices */
    .cursor, .cursor-dot { display: none; }
    
    section {
        padding: 60px 20px; /* Reduce padding for smaller screens */
    }

    .section-title {
        font-size: 2rem;
    }

    nav {
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    nav {
        flex-direction: column;
        gap: 10px;
        height: auto;
        padding-bottom: 15px;
    }
    
    .brand-container {
        justify-content: center;
        width: 100%;
    }

    .brand-name {
        font-size: 1.4rem;
    }

    .brand-tagline {
        font-size: 0.6rem;
    }
}