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

    body {
      min-height: 100vh;
      background-color: #030000;
      color: #fff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      overflow-x: hidden;
      position: relative;
    }

    @font-face {
      font-family: 'Akira';
      src: url('/fonts/Akira Expanded Demo.otf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'Drop';
      src: url('/fonts/DroplineRegular-Wpegz.otf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    a {
      color: #fff;
      text-decoration: none;
    }

    /* Animated Gradient Background */
    .gradient-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      background: linear-gradient(135deg, #060000 0%, #030000 50%, #080000 100%);
      overflow: hidden;
    }

    .gradient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(140px);
      opacity: 0.4;
    }

    .gradient-orb-1 {
      width: 1200px;
      height: 1200px;
      background: radial-gradient(circle, #1a0000, #050000);
      top: -25%;
      left: -15%;
      animation: float1 20s ease-in-out infinite;
    }

    .gradient-orb-2 {
      width: 1100px;
      height: 1100px;
      background: radial-gradient(circle, #cc0000, #3d0000);
      bottom: -20%;
      right: -10%;
      animation: float2 25s ease-in-out infinite;
    }

    .gradient-orb-3 {
      width: 950px;
      height: 950px;
      background: radial-gradient(circle, #0d0000, #000000);
      top: 35%;
      left: 35%;
      animation: float3 30s ease-in-out infinite;
    }

    .gradient-orb-4 {
      width: 1050px;
      height: 1050px;
      background: radial-gradient(circle, #b30000, #2d0000);
      top: -15%;
      right: -15%;
      animation: float4 28s ease-in-out infinite;
    }

    .gradient-orb-5 {
      width: 1150px;
      height: 1150px;
      background: radial-gradient(circle, #4d0000, #080000);
      bottom: -25%;
      left: 15%;
      animation: float5 23s ease-in-out infinite;
    }

    .gradient-orb-6 {
      width: 900px;
      height: 900px;
      background: radial-gradient(circle, #cc0000, #660000);
      top: 15%;
      right: 25%;
      animation: float6 27s ease-in-out infinite;
    }

    .gradient-orb-7 {
      width: 1000px;
      height: 1000px;
      background: radial-gradient(circle, #1a0000, #040000);
      top: 50%;
      left: -10%;
      animation: float7 24s ease-in-out infinite;
    }

    .gradient-orb-8 {
      width: 1100px;
      height: 1100px;
      background: radial-gradient(circle, #990000, #400000);
      bottom: 10%;
      right: 40%;
      animation: float8 26s ease-in-out infinite;
    }

    .gradient-orb-9 {
      width: 850px;
      height: 850px;
      background: radial-gradient(circle, #e60000, #800000);
      top: -5%;
      left: 50%;
      animation: float9 22s ease-in-out infinite;
    }

    .gradient-orb-10 {
      width: 1000px;
      height: 1000px;
      background: radial-gradient(circle, #330000, #0a0000);
      bottom: 30%;
      left: 60%;
      animation: float10 29s ease-in-out infinite;
    }

    @keyframes float1 {
      0%, 100% {
        transform: translate(0, 0);
      }
      25% {
        transform: translate(150px, -100px);
      }
      50% {
        transform: translate(80px, 120px);
      }
      75% {
        transform: translate(-120px, 50px);
      }
    }

    @keyframes float2 {
      0%, 100% {
        transform: translate(0, 0);
      }
      25% {
        transform: translate(-100px, 80px);
      }
      50% {
        transform: translate(120px, -120px);
      }
      75% {
        transform: translate(60px, 100px);
      }
    }

    @keyframes float3 {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      25% {
        transform: translate(-80px, -100px) scale(1.1);
      }
      50% {
        transform: translate(-150px, 80px) scale(0.9);
      }
      75% {
        transform: translate(100px, -50px) scale(1.05);
      }
    }

    @keyframes float4 {
      0%, 100% {
        transform: translate(0, 0);
      }
      33% {
        transform: translate(-120px, 100px);
      }
      66% {
        transform: translate(90px, -80px);
      }
    }

    @keyframes float5 {
      0%, 100% {
        transform: translate(0, 0);
      }
      30% {
        transform: translate(110px, -90px);
      }
      60% {
        transform: translate(-100px, 110px);
      }
    }

    @keyframes float6 {
      0%, 100% {
        transform: translate(0, 0);
      }
      35% {
        transform: translate(-130px, -70px);
      }
      70% {
        transform: translate(100px, 120px);
      }
    }

    @keyframes float7 {
      0%, 100% {
        transform: translate(0, 0);
      }
      40% {
        transform: translate(140px, 90px);
      }
      80% {
        transform: translate(-80px, -110px);
      }
    }

    @keyframes float8 {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(-90px, 100px) scale(1.15);
      }
    }

    @keyframes float9 {
      0%, 100% {
        transform: translate(0, 0);
      }
      45% {
        transform: translate(-110px, 120px);
      }
      90% {
        transform: translate(130px, -90px);
      }
    }

    @keyframes float10 {
      0%, 100% {
        transform: translate(0, 0);
      }
      33% {
        transform: translate(100px, -100px);
      }
      66% {
        transform: translate(-120px, 80px);
      }
    }

    #intro-container {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    #intro-container.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .intro-numbers {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      position: relative;
    }

    .intro-text {
      font-size: 3rem;
      font-weight: 300;
      letter-spacing: 0.1em;
      color: #e5e5e5;
      opacity: 0;
      transform: translateX(120px);
    }

    .intro-text.slide-in {
      animation: slideIn 1.2s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    }

    .intro-text.slide-up {
      animation: slideUp 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    }

    .intro-text-4 {
      position: absolute;
      font-size: 3rem;
      font-weight: 300;
      letter-spacing: 0.1em;
      color: #e5e5e5;
      opacity: 0;
      transform: translateY(120px);
      font-family: 'Akira';
    }

    .intro-text-4.slide-up-in {
      animation: slideUpIn 1.0s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    }

    #main-content {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    #main-content.visible {
      opacity: 1;
    }

    .welcome-text {
      text-align: center;
    }

    .welcome-text h1 {
      font-size: 2.5rem;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: #e5e5e5;
      margin-bottom: -0.5rem;
      font-family: 'akira';
    }

    .welcome-text h3 {
      margin-bottom: 1rem;
    }

    .welcome-text p {
      color: #6b7280;
      font-size: 1rem;
    }

    @keyframes slideIn {
      0% {
        transform: translateX(120px);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideUp {
      0% {
        transform: translateX(0);
        opacity: 1;
      }
      100% {
        transform: translateY(-100px);
        opacity: 0;
      }
    }

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

    .svgs-link {
      display: inline-block;
      transition: transform 0.2s ease, opacity 0.2s ease;
      cursor: pointer;
      margin: 0 1%;
    }

    .svgs-link:hover {
      transform: scale(1.1);
      opacity: 0.8;
    }

    .svgs-link svg {
      width: 48px;
      height: 48px;
      fill: #ffffff;
    }