/* ===== LOADER STYLES ===== */
 .loader-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient);
     background: #000;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     transition: opacity 0.5s ease, visibility 0.5s ease;
 }

 .loader-container.hidden {
     opacity: 0;
     visibility: hidden;
 }

 .spinner {
     height: 300px;
     width: 300px;
     position: relative;
     margin-bottom: 30px;
 }

 .spinner span {
     width: 100%;
     height: 100%;
     position: absolute;
     border-radius: 50%;
     border-left: 5px solid #efeff3;
     border-top: 10px solid transparent;
     border-right: 5px solid #e4e0db;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
 }

 .spinner span:nth-child(1) {
     animation-name: ani-1;
 }

 .spinner span:nth-child(2) {
     animation-name: ani-2;
 }

 .spinner span:nth-child(3) {
     animation-name: ani-3;
 }

 @keyframes ani-1 {
     from {
         transform: rotatez(120deg) rotatex(70deg) rotatez(0deg);
     }

     to {
         transform: rotatez(120deg) rotatex(70deg) rotatez(360deg);
     }
 }

 @keyframes ani-2 {
     from {
         transform: rotatez(240deg) rotatex(70deg) rotatez(0deg);
     }

     to {
         transform: rotatez(240deg) rotatex(70deg) rotatez(360deg);
     }
 }

 @keyframes ani-3 {
     from {
         transform: rotatez(360deg) rotatex(70deg) rotatez(0deg);
     }

     to {
         transform: rotatez(360deg) rotatex(70deg) rotatez(360deg);
     }
 }

 .loader-text {
     color: white;
     text-align: center;
     font-size: 1.5rem;
     font-weight: 500;
     margin-bottom: 10px;
     letter-spacing: 1px;
 }

 .loader-name {
     color: white;
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 5px;
     text-align: center;
     background: linear-gradient(25deg, #fff 30%, #d77f03 70%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .loader-subtitle {
     color: rgba(255, 255, 255, 0.8);
     margin-top: 5px;
     font-size: 1rem;
 }

 .progress-container {
     width: 300px;
     height: 4px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 2px;
     margin-top: 30px;
     overflow: hidden;
 }

 .progress-bar {
     height: 100%;
     background: linear-gradient(90deg, #ffffff, #cf7d01);
     width: 0%;
     transition: width 0.3s ease;
     border-radius: 2px;
 }

 /* ===== MAIN WEBSITE STYLES ===== */
 .website-content {
     opacity: 0;
     transition: opacity 0.5s ease;
 }

 .website-content.visible {
     opacity: 1;
 }