/* ===========================
   تم و استایل صفحه (با توضیحات فارسی)
   هیچ مقداری تغییر نکرده؛ فقط کامنت اضافه شده است
   =========================== */

/* متغیرهای سراسری رنگ‌ها (تم تیره + نارنجی برند) */
:root{
  --bg:#0b1220;   /* رنگ پس‌زمینهٔ اصلی (سرمه‌ای تیره) */
  --fg:#f59e0b;   /* رنگ متن/المان‌های اصلی (نارنجی برند) */
  --muted:#f59e0b;/* رنگ متن‌های فرعی/برند (اینجا همان نارنجی) */
  --accent:#f59e0b;/* رنگ تأکیدی برای المان‌های برند */
}

/* تنظیم باکس‌مدل برای همهٔ عناصر تا padding/border در width/height لحاظ شود */
*{box-sizing:border-box}

/* پایهٔ صفحه: قد، پس‌زمینه، رنگ متن و خانوادهٔ فونت */
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif
}

/* بوم (canvas) تمام‌صفحه برای افکت/انیمیشن پس‌زمینه */
#bg-canvas{
  position:fixed; /* همیشه به کل صفحه چسبیده */
  inset:0;        /* بالا/پایین/چپ/راست = 0 */
  width:100%;
  height:100%;
  display:block
}

/* ویگنت (تیرگی ظریف دور تا دور صفحه) روی بوم پس‌زمینه */
.vignette{
  position:fixed;
  inset:0;
  pointer-events:none; /* کلیک‌پذیر نباشد */
  background:radial-gradient(
    80% 80% at 50% 50%,
    transparent 0%,
    transparent 62%,
    rgba(0,0,0,.45) 100% /* تیرگی در حاشیه‌ها */
  )
}

/* نوار برند/هدر: وسط بالا، شامل لوگو */
.brand{
  position:fixed;
  top:24px; left:0; right:0;
  display:grid; place-items:center; /* قرارگیری لوگو در مرکز افقی */
  z-index:10 /* بالاتر از بوم و ویگنت */
}

/* کپسول لوگو (پس‌زمینهٔ نارنجی + گردی کامل + سایه) */
.logo{
  display:inline-block;
  background:var(--accent);
  border-radius:9999px;
  padding:8px 14px;
  box-shadow:0 10px 28px rgba(245,158,11,.4)
}

/* خود تصویر لوگو داخل کپسول */
.logo img{
  display:block;
  height:56px;   /* ارتفاع لوگو */
  width:auto     /* نسبت تصویر حفظ شود */
}

/* بخش مرکزی صفحه: محتوای اصلی/تیتر در وسط عمودی-افقی */
.center{
  position:fixed; inset:0;
  display:grid; place-items:center; /* مرکز دقیق */
  text-align:center;
  z-index:9;     /* زیر .brand ولی بالای بوم */
  padding:24px
}

/* تیتر بزرگ مرکز (Welcome/Brand Name) */
h1{
  margin:0;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1;
  font-size:clamp(48px, 9vw, 112px); /* واکنش‌گرا */
  text-shadow:0 16px 40px rgba(0,0,0,.6) /* عمق بصری */
}

/* ردیف برچسب/منو مرکزی (نسخهٔ کوتاه با رنگ ملایم) */
.tag{
  margin:.9rem 0 0;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase
}

/* توسعهٔ رفتار .tag برای چیدمان افقی لینک‌ها در مرکز */
.tag{
  display:flex;
  gap:.8rem;
  justify-content:center;
  align-items:center;
  letter-spacing:.25em;  /* کمی متفاوت از بالا؛ همین ترتیب cascade اعمال می‌شود */
  text-transform:uppercase;
}

/* استایل لینک‌های داخل .tag (رنگ از خود .tag می‌آید) */
.tag a{
  color:inherit;
  text-decoration:none;
  padding:.1rem .2rem;
}

/* افکت هاور/فوکوس روی لینک‌های ردیف مرکزی */
.tag a:hover,
.tag a:focus{
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(245,158,11,.35));
}

/* جداکنندهٔ نقطه/خط بین لینک‌ها (کمرنگ‌تر) */
.tag span{ opacity:.6; }

/* اجبار رنگ نارنجی برای لینک‌های ردیف برند در همهٔ حالات */
.tag a,
.tag a:visited,
.tag a:active,
.tag a:focus{
  color:#f59e0b !important;
  text-decoration:none !important;
}

/* افکت هاور نهایی برای لینک‌ها (بدون تغییر ظاهری دیگر) */
.tag a:hover{
  text-decoration:none;
  opacity:.95;
  filter:drop-shadow(0 0 6px rgba(245,158,11,.35));
}