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

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

    :root {
      --bg: #05050a;
      --purple: #8b35ff;
      --violet: #b96cff;
      --text: #f7f3ff;
      --muted: #a79bb9;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      user-select: none;
    }

    body {
      font-family: "Vazirmatn", Tahoma, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 50% 40%, rgba(111, 35, 190, .18), transparent 32%),
        radial-gradient(circle at 15% 90%, rgba(71, 20, 180, .22), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(112, 27, 190, .16), transparent 25%),
        var(--bg);
      display: grid;
      place-items: center;
      position: relative;
    }

    .noise {
      position: fixed;
      inset: 0;
      opacity: .035;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .glow {
      position: fixed;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(124, 43, 255, .12);
      filter: blur(100px);
      pointer-events: none;
    }

    .glow.one {
      top: -180px;
      right: 12%;
    }

    .glow.two {
      bottom: -230px;
      left: 8%;
    }

    .content {
      width: min(92vw, 900px);
      text-align: center;
      position: relative;
      z-index: 2;
      animation: reveal 1.1s ease-out both;
    }

    .logo {
      width: 105px;
      height: 105px;
      margin: 0 auto 24px;
      display: grid;
      place-items: center;
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      border-radius: 22px;
    }

    .brand {
      font-size: clamp(2.2rem, 6vw, 4rem);
      font-weight: 800;
      letter-spacing: -2px;
      line-height: 1.2;
    }

    .brand span {
      color: var(--violet);
      text-shadow: 0 0 28px rgba(185, 108, 255, .35);
    }

    .english {
      direction: ltr;
      margin-top: 8px;
      font-size: .95rem;
      letter-spacing: 9px;
      color: #9e84c4;
      padding-left: 9px;
    }

    .coming {
      direction: ltr;
      margin-top: 65px;
      font-family: Arial, sans-serif;
      font-size: clamp(2rem, 6vw, 4rem);
      font-weight: 300;
      letter-spacing: clamp(8px, 2vw, 18px);
      padding-left: clamp(8px, 2vw, 18px);
      color: #ddd0ee;
      text-shadow: 0 0 25px rgba(177, 113, 255, .22);
    }

    .subtitle {
      margin-top: 20px;
      color: #b8acc7;
      font-size: clamp(.9rem, 2vw, 1.05rem);
    }

    .divider {
      width: 265px;
      height: 1px;
      margin: 35px auto 20px;
      background: linear-gradient(90deg, transparent, #8c42d9, transparent);
      position: relative;
    }

    .divider::after {
      content: "✦";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #b96cff;
      background: var(--bg);
      padding: 0 14px;
      font-size: 14px;
    }

    .contact-info {
      width: min(92vw, 620px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .contact-card {
      min-height: 82px;
      padding: 15px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 13px;
      text-decoration: none;
      color: inherit;
      border: 1px solid rgba(185, 108, 255, .18);
      border-radius: 18px;
      background: rgba(255, 255, 255, .035);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: .25s ease;
    }

    .contact-card:hover {
      transform: translateY(-4px);
      border-color: rgba(185, 108, 255, .45);
      background: rgba(139, 53, 255, .08);
      box-shadow: 0 12px 35px rgba(70, 20, 120, .18);
    }

    .contact-icon {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: rgba(139, 53, 255, .13);
      color: var(--violet);
    }

    .contact-icon svg {
      width: 21px;
      height: 21px;
      fill: currentColor;
    }

    .contact-text {
      min-width: 0;
      text-align: right;
    }

    .contact-label {
      display: block;
      color: #877a98;
      font-size: .72rem;
      margin-bottom: 3px;
    }

    .contact-value {
      display: block;
      color: #ded5e9;
      font-size: .88rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .domain {
      direction: ltr;
      margin-top: 22px;
      font-family: Arial, sans-serif;
      letter-spacing: 5px;
      color: #766a87;
      font-size: .85rem;
    }

    .waves {
      position: fixed;
      left: -5%;
      right: -5%;
      bottom: -4px;
      height: 28vh;
      min-height: 170px;
      pointer-events: none;
      overflow: hidden;
    }

    .wave {
      position: absolute;
      left: -10%;
      width: 120%;
      height: 100%;
      border-top: 1px solid rgba(151, 70, 255, .85);
      border-radius: 50% 50% 0 0;
      box-shadow: 0 -8px 35px rgba(108, 36, 255, .18);
    }

    .wave.one {
      top: 38%;
      transform: rotate(5deg);
    }

    .wave.two {
      top: 54%;
      transform: rotate(-4deg);
      opacity: .45;
    }

    .wave.three {
      top: 72%;
      transform: rotate(2deg);
      opacity: .25;
    }

    @keyframes reveal {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

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

    @media (max-width: 600px) {
      .logo {
        width: 86px;
        height: 86px;
        border-radius: 26px;
      }

      .coming {
        margin-top: 48px;
      }

      .english {
        letter-spacing: 6px;
      }

      .contact-info {
        grid-template-columns: 1fr;
      }

      .contact-card {
        min-height: 74px;
      }

      .domain {
        letter-spacing: 3px;
      }

      .waves {
        height: 22vh;
      }
    }