body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #111;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      flex-direction: column;
      text-align: center;
      line-height: 1.6;
      overflow: hidden;
      position: relative;
  }

  main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
  }

  header h1 {
      font-size: 3em;
      margin-bottom: 0.2em;
      color: #45b1c3;
      font-weight: 300;
      font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
      letter-spacing: 0.1em;
      text-transform: none;
  }

  /* Logo Styles */
  .logo-container {
      text-align: center;
      margin-bottom: -4rem;
      position: relative;
      z-index: 2;
  }

  .brand-logo {
      max-width: 280px;
      width: 100%;
      height: auto;
      filter: none;
      transition: all 0.3s ease;
  }

  .brand-logo:hover {
      transform: scale(1.05);
  }

  .hero {
      text-align: center;
      width: 100%;
      max-width: 600px;
  }

  .hero h2 {
      font-size: 1.5em;
      color: #fff;
      margin-bottom: 1em;
      font-weight: 300;
      text-align: center;
  }

  .hero p {
      font-size: 1.2em;
      color: #ccc;
      margin-top: 2em;
      margin-bottom: 1.5em;
      text-align: center;
  }

  .coming-soon-text {
      margin-top: 2em !important;
      margin-bottom: 1em !important;
      font-size: 1.2em;
  }

  .footer {
      margin-top: auto;
      padding: 20px;
      font-size: 0.9em;
      color: #666;
      width: 100%;
      text-align: center;
  }

  .footer p {
      margin: 0;
  }

  /* Background Animation */
  .background-animation {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
  }

  .geometric-shapes {
      position: relative;
      width: 100%;
      height: 100%;
  }

  .shape {
      position: absolute;
      animation: geometricFloat 8s ease-in-out infinite;
  }

  /* Triangles */
  .triangle-1, .triangle-2 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 43px solid rgba(69, 177, 195, 0.15);
  }

  .triangle-1 {
      top: 15%;
      left: 15%;
      animation-delay: 0s;
  }

  .triangle-2 {
      top: 70%;
      right: 20%;
      animation-delay: 3s;
      transform: rotate(180deg);
  }

  /* Squares */
  .square-1, .square-2 {
      width: 30px;
      height: 30px;
      background: linear-gradient(45deg, rgba(30, 56, 98, 0.2), rgba(69, 177, 195, 0.1));
      transform: rotate(45deg);
  }

  .square-1 {
      top: 25%;
      right: 15%;
      animation-delay: 1.5s;
  }

  .square-2 {
      top: 85%;
      left: 25%;
      animation-delay: 4.5s;
  }

  /* Diamonds */
  .diamond-1, .diamond-2 {
      width: 20px;
      height: 20px;
      background: rgba(69, 177, 195, 0.12);
      transform: rotate(45deg);
      border: 2px solid rgba(30, 56, 98, 0.3);
  }

  .diamond-1 {
      top: 45%;
      left: 8%;
      animation-delay: 2s;
  }

  .diamond-2 {
      top: 30%;
      right: 30%;
      animation-delay: 5s;
  }

  /* Particles */
  .particles {
      position: relative;
      width: 100%;
      height: 100%;
  }

  .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #45b1c3;
      border-radius: 50%;
      animation: particleFloat 12s linear infinite;
  }

  .particle-1 {
      top: 10%;
      left: 5%;
      animation-delay: 0s;
  }

  .particle-2 {
      top: 30%;
      left: 80%;
      animation-delay: 2s;
  }

  .particle-3 {
      top: 60%;
      left: 10%;
      animation-delay: 4s;
  }

  .particle-4 {
      top: 80%;
      left: 70%;
      animation-delay: 6s;
  }

  .particle-5 {
      top: 20%;
      left: 60%;
      animation-delay: 8s;
  }

  .particle-6 {
      top: 90%;
      left: 40%;
      animation-delay: 10s;
  }

  @keyframes geometricFloat {
      0%, 100% {
          transform: translateY(0px) rotate(0deg) scale(1);
          opacity: 0.4;
      }
      33% {
          transform: translateY(-15px) rotate(120deg) scale(1.1);
          opacity: 0.7;
      }
      66% {
          transform: translateY(-5px) rotate(240deg) scale(0.9);
          opacity: 0.5;
      }
  }

  @keyframes particleFloat {
      0% {
          transform: translateY(100vh) translateX(0px);
          opacity: 0;
      }
      10% {
          opacity: 1;
      }
      90% {
          opacity: 1;
      }
      100% {
          transform: translateY(-10px) translateX(50px);
          opacity: 0;
      }
  }

  /* Animated Title */
  .animated-title {
      position: relative;
      z-index: 2;
  }

  .letter {
      display: inline-block;
      animation: letterDrop 0.8s ease-out forwards;
      opacity: 0;
      transform: translateY(-50px);
  }

  .letter:nth-child(1) { animation-delay: 0.1s; }
  .letter:nth-child(2) { animation-delay: 0.2s; }
  .letter:nth-child(3) { animation-delay: 0.3s; }
  .letter:nth-child(4) { animation-delay: 0.4s; }
  .letter:nth-child(5) { animation-delay: 0.5s; }
  .letter:nth-child(7) { animation-delay: 0.7s; }
  .letter:nth-child(8) { animation-delay: 0.8s; }
  .letter:nth-child(9) { animation-delay: 0.9s; }
  .letter:nth-child(10) { animation-delay: 1.0s; }
  .letter:nth-child(11) { animation-delay: 1.1s; }

  @keyframes letterDrop {
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Fade in animations */
  .fade-in-up {
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 1s ease-out forwards;
      position: relative;
      z-index: 2;
  }

  .delay-1 { animation-delay: 1.2s; }
  .delay-1-5 { animation-delay: 1.3s; }
  .delay-2 { animation-delay: 1.4s; }
  .delay-3 { animation-delay: 1.6s; }

  @keyframes fadeInUp {
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* Pulse animation for "Coming Soon" */
  .pulse-text {
      animation: pulse 2s infinite;
      display: inline-block;
  }

  @keyframes pulse {
      0%, 100% {
          color: #45b1c3;
          text-shadow: 0 0 10px rgba(69, 177, 195, 0.5);
      }
      50% {
          color: #fff;
          text-shadow: 0 0 20px rgba(30, 56, 98, 0.8);
      }
  }

  /* Loading Animation */
  .loading-container {
      margin-top: 2rem;
      text-align: center;
      width: 100%;
  }

  .loading-text {
      font-size: 1rem;
      color: #45b1c3;
      margin: 0 auto;
      text-align: center;
      animation: typewriter 3s infinite;
  }

  @keyframes typewriter {
      0%, 90%, 100% {
          opacity: 1;
      }
      45%, 55% {
          opacity: 0.7;
      }
  }

  /* Enhanced main content */
  main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      position: relative;
      z-index: 2;
  }

  /* Responsive design */
  @media (max-width: 768px) {
      .brand-logo {
          max-width: 200px;
      }

      header h1 {
          font-size: 2.2em;
          white-space: nowrap;
          letter-spacing: 0.05em;
      }
      
      .hero h2 {
          font-size: 1.3em;
      }
      
      .hero p {
          font-size: 1.1em;
      }
      
      main {
          padding: 1rem;
      }

      .particle {
          display: none; /* Hide particles on mobile for performance */
      }

      .shape {
          animation-duration: 12s; /* Slower animations on mobile */
      }

      .triangle-1, .triangle-2 {
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 26px solid rgba(69, 177, 195, 0.1);
      }

      .triangle-1 {
          top: 10% !important;
          left: 5% !important;
      }

      .triangle-2 {
          top: 85% !important;
          right: 10% !important;
      }

      .square-1, .square-2 {
          width: 20px;
          height: 20px;
      }

      .square-1 {
          top: 15% !important;
          right: 5% !important;
      }

      .square-2 {
          top: 90% !important;
          left: 15% !important;
      }

      .diamond-1, .diamond-2 {
          width: 15px;
          height: 15px;
      }

      .diamond-1 {
          top: 75% !important;
          left: 5% !important;
      }

      .diamond-2 {
          top: 20% !important;
          right: 25% !important;
      }
  }

  /* Extra small screens */
  @media (max-width: 480px) {
      header h1 {
          font-size: 1.8em;
          letter-spacing: 0.03em;
      }
  }