<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>62460654</title>

  <!-- فونت فارسی خوانا و سبک -->
  <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;800&display=swap" rel="stylesheet">

  <style>
    :root{
      --bg1:#0f172a; /* slate-900 */
      --bg2:#1e293b; /* slate-800 */
      --accent:#007bff;
      --accent-dark:#0056b3;
      --glass-bg:rgba(255,255,255,0.08);
      --glass-border:rgba(255,255,255,0.18);
      --text:#e5e7eb; /* zinc-200 */
      --muted:#cbd5e1; /* slate-300 */
      --shadow: 0 10px 30px rgba(0,0,0,0.35);
    }

    *{box-sizing:border-box}

    html,body{
      height:100%;
      margin:0;
      font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color:var(--text);
      background:
        radial-gradient(1200px 800px at 80% -10%, #2563eb55, transparent 60%),
        radial-gradient(900px 600px at -10% 90%, #22c55e40, transparent 60%),
        linear-gradient(135deg, var(--bg1), var(--bg2));
      overflow:auto;
    }

    /* الگوی نرم پس‌زمینه */
    body::before{
      content:"";
      position:fixed; inset:0;
      background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06) 0 2px, transparent 3px),
        radial-gradient(circle at 45% 60%, rgba(255,255,255,0.04) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05) 0 2px, transparent 3px);
      background-size: 80px 80px, 110px 110px, 95px 95px;
      pointer-events:none;
      filter: blur(0.3px);
    }

    .wrap{
      min-height:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:24px;
    }

    .card{
      width:100%;
      max-width:860px;
      background:var(--glass-bg);
      border:1px solid var(--glass-border);
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      border-radius:24px;
      padding: clamp(20px, 4vw, 36px);
      box-shadow: var(--shadow);
    }

    .title{
      margin:0 0 10px;
      font-weight:800;
      line-height:1.25;
      font-size: clamp(28px, 5vw, 46px);
      letter-spacing:-0.5px;
    }

    .subtitle{
      margin:0 0 28px;
      font-weight:400;
      color:var(--muted);
      font-size: clamp(14px, 2.2vw, 18px);
    }

    .prompt{
      margin: 6px 0 18px;
      font-weight:600;
      font-size: clamp(15px, 2.4vw, 20px);
      color:#e2e8f0;
    }

    .actions{
      display:flex;
      flex-direction:column;
      gap:14px;
      margin-top:6px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:16px 22px;
      border-radius:14px;
      text-decoration:none;
      font-size: clamp(16px, 2.6vw, 20px);
      font-weight:700;
      line-height:1;
      transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
      outline: none;
      border:1px solid transparent;
      will-change: transform;
    }

    .btn-primary{
      background: linear-gradient(135deg, var(--accent), #3b82f6);
      color:#fff;
      box-shadow: 0 10px 20px rgba(0,123,255,0.28);
    }
    .btn-primary:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 28px rgba(0,123,255,0.32);
      background: linear-gradient(135deg, #1182ff, #2563eb);
    }
    .btn-primary:active{ transform: translateY(0px); }

    .btn-ghost{
      background: rgba(255,255,255,0.06);
      color:#e7f0ff;
      border-color: rgba(255,255,255,0.16);
    }
    .btn-ghost:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,0.10);
      box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    }
    .btn-ghost:active{ transform: translateY(0px); }

    /* فوکوس برای دسترس‌پذیری */
    .btn:focus-visible{
      box-shadow: 0 0 0 3px rgba(37,99,235,0.6), 0 8px 24px rgba(0,0,0,0.28);
    }

    /* ردیف دکمه‌ها در نمایشگرهای بزرگ */
    @media (min-width: 600px){
      .actions{
        flex-direction:row;
      }
    }

    /* نوار کوچک برند / زیرنویس */
    .brandline{
      margin-top:22px;
      display:flex;
      align-items:center;
      gap:10px;
      opacity:.9;
      font-size: clamp(12px, 2vw, 14px);
      color:#cbd5e1;
      border-top:1px dashed rgba(255,255,255,0.18);
      padding-top:14px;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background: linear-gradient(135deg, #60a5fa, #22c55e);
      box-shadow: 0 0 0 3px rgba(96,165,250,0.25);
    }
  </style>
</head>
<body>
  <div class="wrap">
    <section class="card" aria-labelledby="heading">
      <h1 id="heading" class="title">به سامانه ارسال پیامک فول‌وب خوش آمدید</h1>
      <p class="subtitle">
        از اینجا می‌توانید وارد سامانهٔ جدید یا نسخهٔ قدیم شوید. لطفاً گزینهٔ مناسب را انتخاب کنید.
      </p>

      <div class="prompt">لطفاً انتخاب کنید می‌خواهید وارد کدام سامانه شوید:</div>

      <nav class="actions" aria-label="انتخاب سامانه">
        <a class="btn btn-primary" href="https://sms.fullweb.ir/login" aria-label="ورود به سامانه جدید">
          سامانهٔ جدید
        </a>

        <a class="btn btn-ghost" href="https://oldsms.fullweb.ir" aria-label="ورود به سامانه قدیم)">
          سامانهٔ قدیم
        </a>
      </nav>

      <div class="brandline">
        <span class="dot" aria-hidden="true"></span>
        <span>FullWeb SMS Gateway</span>
      </div>
    </section>
  </div>
</body>
</html>