:root {
       --primary-color: #f9d350;
       --primary-dark: #e6c044;
       --secondary-color: #f8e8a0;
       --dark-color: #2d3436;
       --light-color: #f5f6fa;
       --white: #ffffff;
       --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.15);
   }

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

   body {
       background-color: var(--light-color);
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       overflow: hidden;
   }

   .loader-container {
       text-align: center;
       position: relative;
       width: 100%;
       max-width: 500px;
   }

   .logo {
       font-size: 3.5rem;
       font-weight: 700;
       color: var(--dark-color);
       margin-bottom: 20px;
       position: relative;
       display: inline-block;
   }

   .logo::after {
       content: '';
       position: absolute;
       bottom: -8px;
       left: 50%;
       transform: translateX(-50%);
       width: 80px;
       height: 4px;
       background: var(--primary-color);
       border-radius: 4px;
   }

   .tagline {
       color: var(--dark-color);
       opacity: 0.8;
       margin-bottom: 40px;
       font-size: 1.1rem;
   }

   .loader {
       width: 80px;
       height: 80px;
       margin: 0 auto 30px;
       position: relative;
   }

   .loader-circle {
       position: absolute;
       width: 100%;
       height: 100%;
       border: 8px solid transparent;
       border-radius: 50%;
       animation: rotate 2s linear infinite;
       border-top-color: var(--primary-color);
       border-bottom-color: var(--primary-dark);
   }

   .loader-inner {
       position: absolute;
       top: 15px;
       left: 15px;
       right: 15px;
       bottom: 15px;
       border: 8px solid transparent;
       border-radius: 50%;
       animation: rotate 1.5s linear infinite reverse;
       border-left-color: var(--secondary-color);
       border-right-color: var(--secondary-color);
   }

   @keyframes rotate {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(360deg);
       }
   }

   .progress-container {
       width: 80%;
       max-width: 300px;
       height: 8px;
       background-color: rgba(45, 52, 54, 0.1);
       border-radius: 4px;
       margin: 0 auto;
       overflow: hidden;
   }

   .progress-bar {
       height: 100%;
       width: 0;
       background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
       border-radius: 4px;
       transition: width 0.1s linear;
   }

   .loading-text {
       margin-top: 20px;
       color: var(--dark-color);
       font-weight: 500;
       font-size: 1rem;
   }

   .bubbles {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       pointer-events: none;
       z-index: -1;
   }

   .bubble {
       position: absolute;
       background-color: var(--secondary-color);
       border-radius: 50%;
       opacity: 0.6;
       animation: float-up 10s linear infinite;
   }

   @keyframes float-up {
       0% {
           transform: translateY(100vh) scale(0);
           opacity: 0;
       }

       10% {
           opacity: 0.6;
       }

       90% {
           opacity: 0.6;
       }

       100% {
           transform: translateY(-100px) scale(1);
           opacity: 0;
       }
   }

   .welcome-page {
       display: none;
       text-align: center;
   }

   .welcome-page h1 {
       color: var(--dark-color);
       margin-bottom: 20px;
       font-size: 2.5rem;
   }

   .welcome-page p {
       color: var(--dark-color);
       opacity: 0.8;
       margin-bottom: 40px;
       font-size: 1.1rem;
   }

   .btn {
       display: inline-block;
       padding: 12px 30px;
       background-color: var(--primary-color);
       color: var(--dark-color);
       border: none;
       border-radius: 50px;
       font-size: 1rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       text-decoration: none;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .btn:hover {
       background-color: var(--primary-dark);
       transform: translateY(-3px);
       box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
   }