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

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f0f4f8;
    }

    header {
      background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
      color: white;
      padding: 20px 5%;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 1400px;
      margin: 0 auto;
      gap: 25px;
    }

    .logo-container {
      flex-shrink: 0;
    }

.logo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 25px rgba(81, 203, 238, 0.6);
  /* Animation properties */
  animation: logoEntrance 1.8s ease-out forwards;
  opacity: 0;
  /* Optimization */
  will-change: transform, opacity;
}

    .center-group {
      text-align: center;
      flex: 1;
      min-width: 0;
    }

    .title {
      font-size: 2.8rem;
      font-weight: 800;
      letter-spacing: 2px;
      background: linear-gradient(90deg, #00d4ff, #ffffff, #00d4ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% auto;
      animation: shine 4s linear infinite, textReveal 1.6s ease-out forwards;
      opacity: 0;
      display: inline-block;
      will-change: transform, opacity;
    }

    .subtitle {
      font-size: 1.2rem;
      font-weight: 500;
      color: #a0d8ef;
      margin-top: 8px;
      letter-spacing: 1.5px;
      opacity: 0;
      animation: fadeUp 1.4s ease-out 0.6s forwards;
      will-change: transform, opacity;
    }

    /* Animations */
    @keyframes logoEntrance {
      0%   { opacity: 0; transform: scale(0.4) rotate(-15deg); }
      60%  { opacity: 1; transform: scale(1.15); }
      100% { opacity: 1; transform: scale(1) rotate(0); }
    }

    @keyframes textReveal {
      0%   { opacity: 0; transform: translateY(40px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes shine {
      to { background-position: 200% center; }
    }

    @keyframes fadeUp {
      0%   { opacity: 0; transform: translateY(25px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Mobile adjustments */
    @media (max-width: 840px) {
      .header-content {
        flex-direction: column;
        gap: 15px;
      }

      .title {
        font-size: 2.4rem;
      }

      .subtitle {
        font-size: 1.15rem;
      }
    }

    @media (max-width: 500px) {
      .logo {
        width: 90px;
        height: 90px;
      }
      .title {
        font-size: 2.1rem;
      }