@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Vazirmatn:wght@400&display=swap');

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

    body {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: radial-gradient(circle at center, #0a0a0a 0%, #000 80%);
      color: #fff;
      font-family: 'Vazirmatn', sans-serif;
      overflow: hidden;
      text-align: center;
      padding: 1rem;
    }

    .stars {
      position: absolute;
      width: 2px;
      height: 2px;
      background: white;
      box-shadow: 
        100px 200px white,
        300px 800px white,
        500px 400px white,
        900px 100px white,
        1200px 600px white,
        600px 900px white;
      animation: moveStars 30s linear infinite;
      z-index: -2;
    }

    @keyframes moveStars {
      from {transform: translateY(0);}
      to {transform: translateY(-1000px);}
    }

    .glow-ring {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
      filter: blur(60px);
      z-index: -1;
      animation: pulse 6s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% {transform: scale(1);}
      50% {transform: scale(1.2);}
    }

    .logo {
      position: relative;
      font-family: 'Orbitron', sans-serif;
      font-size: 10vw;
      letter-spacing: 5px;
      color: transparent;
      background: linear-gradient(90deg, #00e1ff, #8a2be2, #ff007f, #00e1ff);
      -webkit-background-clip: text;
      background-clip: text;
      animation: glow 5s linear infinite, shine 10s ease-in-out infinite;
      text-transform: uppercase;
    }

    .logo small {
      font-size: 0.25em;
      color: #ccc;
      position: absolute;
      top: 10%;
      right: -3%;
      opacity: 0.8;
      animation: flicker 2s infinite;
    }

    @keyframes glow {
      0% {text-shadow: 0 0 10px #00e1ff, 0 0 20px #00e1ff;}
      50% {text-shadow: 0 0 30px #ff007f, 0 0 60px #8a2be2;}
      100% {text-shadow: 0 0 10px #00e1ff, 0 0 20px #00e1ff;}
    }

    @keyframes shine {
      0% {background-position: 0%;}
      100% {background-position: 200%;}
    }

    @keyframes flicker {
      0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {opacity: 0.8;}
      20%, 24%, 55% {opacity: 0.3;}
    }

    .subtitle {
      margin-top: 20px;
      font-size: 1.1rem;
      color: #ccc;
      opacity: 0;
      animation: fadeInUp 2s 1.5s forwards;
    }

    .phone-link {
      font-size: 1.1rem;
      color: #00bcd4;
      text-decoration: none;
      transition: color 0.3s ease;
      display: inline-block;
      margin-top: 15px;
    }

    .phone-link:hover {
      color: #fff;
      text-decoration: underline;
    }


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

    @media (max-width: 1024px) {
      .logo { font-size: 12vw; }
      .glow-ring { width: 300px; height: 300px; filter: blur(40px); }
      .subtitle, .phone-link { font-size: 1rem; }
    }

    @media (max-width: 768px) {
      body { padding: 2rem 1rem; }
      .logo { font-size: 16vw; letter-spacing: 3px; }
      .logo small { top: 5%; right: -5%; font-size: 0.3em; }
      .subtitle { font-size: 0.95rem; margin-top: 15px; }
      .phone-link { font-size: 1rem; margin-top: 10px; }
      .glow-ring { width: 250px; height: 250px; filter: blur(35px); }
    }

    @media (max-width: 480px) {
      .logo { font-size: 18vw; }
      .logo small { right: -8%; top: 2%; }
      .subtitle { font-size: 0.9rem; line-height: 1.6; }
      .phone-link { font-size: 0.95rem; }
      .glow-ring { width: 200px; height: 200px; filter: blur(30px); }
    }