/* Import correct fonts to match brand identity */
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
    
    :root {
        --primary-color: #0cf;
        --secondary-color: #00e676;
        --background-color: #051525;
        --text-color: #f0f6ff;
        --accent-color: #4a9fff;
        --tagline-color: #0cf;
        --glow-color: rgba(12, 204, 255, 0.6);
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: 'Rajdhani', sans-serif;
        overflow: hidden;
        background-color: var(--background-color);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23051525'/%3E%3Cstop offset='1' stop-color='%23051525'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Cpath fill='%23183548' d='M0 0h4v4H0zm8 8h4v4H8zm16 16h4v4h-4zM6 22h4v4H6zM22 6h4v4h-4z'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.05'/%3E%3C/svg%3E");
    }
    
    .preloader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--background-color);
    }
    
    /* Code/tech background effect */
    .code-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='smallGrid' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='rgba(74, 159, 255, 0.05)' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23smallGrid)'/%3E%3C/svg%3E");
        opacity: 0.8;
        z-index: 1;
    }
    
    /* Glow effect for background */
    .glow-background {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    
    .glow-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.3;
    }
    
    .glow-orb:nth-child(1) {
        width: 300px;
        height: 300px;
        background-color: rgba(12, 204, 255, 0.3);
        top: 30%;
        left: 25%;
        animation: floatAnimation 7s infinite alternate ease-in-out;
    }
    
    .glow-orb:nth-child(2) {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 230, 118, 0.2);
        bottom: 20%;
        right: 20%;
        animation: floatAnimation 5s infinite alternate-reverse ease-in-out;
    }
    
    @keyframes floatAnimation {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(20px, -20px);
        }
    }
    
    /* Logo container */
    .logo-container {
        position: relative;
        z-index: 10;
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* Primary brand styling */
    .brand-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 1200px; /* Adjust as needed */
        margin: 0 auto;
    }
    
    .company-name {
        font-family: 'Orbitron', sans-serif;
        font-size: clamp(1.8rem, 5vw, 3.5rem); /* Responsive sizing using clamp */
        font-weight: 200;
        letter-spacing: clamp(2px, 1vw, 6px); /* Responsive letter spacing */
        color: var(--text-color);
        text-transform: uppercase;
        opacity: 0;
        margin-bottom: 15px;
        text-align: center; /* Ensure text is centered */
        width: 100%;
        padding: 0 10px; /* Add padding for small screens */
        line-height: 1.2; /* Improve line height for better readability */
        white-space: normal; /* Allow wrapping for very small screens */
        word-wrap: break-word; /* Enable word wrapping */
        word-break: break-word; /* Allow breaking of words */
        hyphens: auto; /* Enable hyphenation */
    }
    
    .company-name span {
        display: inline-block;
        opacity: 0;
        transform: translateY(20px);
    }
    
    .tagline {
        font-family: 'Rajdhani', sans-serif;
        font-size: clamp(0.8rem, 2vw, 1.1rem);
        font-weight: 400;
        letter-spacing: clamp(2px, 1vw, 5px);
        color: var(--tagline-color);
        text-transform: uppercase;
        margin-bottom: 45px;
        opacity: 0;
        text-align: center;
        width: 100%;
    }
    
    /* Progress bar */
    .progress-container {
        width: clamp(200px, 60vw, 280px);
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 1.5px;
        margin-top: 30px;
        overflow: hidden;
        position: relative;
        opacity: 0;
        margin-left: auto;
        margin-right: auto;
    }
    
    .progress-bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
        border-radius: 1.5px;
        position: relative;
    }
    
    .progress-bar::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: progressLight 1.5s linear infinite;
    }
    
    @keyframes progressLight {
        0% {
            transform: translateX(-100px);
        }
        100% {
            transform: translateX(280px);
        }
    }
    
    /* Loading status text */
    .loading-status {
        margin-top: 15px;
        font-size: 0.9rem;
        font-family: 'Rajdhani', sans-serif;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 2px;
        opacity: 0;
        text-align: center;
        width: 100%;
    }
    
    /* Code/binary particles effect */
    .code-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
    }
    
    .binary {
        position: absolute;
        color: rgba(74, 159, 255, 0.1);
        font-family: monospace;
        font-size: 14px;
        white-space: nowrap;
        user-select: none;
        pointer-events: none;
    }
    
    /* Content frame that will load after preloader */
    #content-frame {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        border: none;
        transition: left 0.8s cubic-bezier(0.7, 0, 0.3, 1);
        z-index: 8000;
        background-color: var(--background-color);
    }
    
    /* Scan line effect - just have one single scan line */
    .scan-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: rgba(12, 204, 255, 0.5);
        box-shadow: 0 0 10px rgba(12, 204, 255, 0.7);
        z-index: 2;
        opacity: 0.7;
        animation: scanAnimation 4s linear infinite;
    }
    
    @keyframes scanAnimation {
    0% {
        top: 0%;
    }
    50% {
        top: 100%;
    }
    100% {
        top: 0%;
    }
}
    
    /* Additional refinements for very small screens */
    @media (max-width: 480px) {
        /* Handle wrapping on small screens */
        .company-name {
            /* Reduce spacing to help with wrapping */
            letter-spacing: 1px;
            font-size: 1.6rem;
        }
        
        .company-name span {
            display: inline-block;
        }
        
        /* Adjust the spacing around "33X" for better wrapping if needed */
        #company-name .first-word {
            display: block;
            margin-bottom: 5px;
        }
        
        .tagline {
            margin-bottom: 20px;
            font-size: 0.75rem;
        }
    }