/* =============================
   تم براق صنعتی با فونت فارسی + لاتین
   ============================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; width: 100%;
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0b0b0b;
  color: #c0c0c0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  direction: rtl;
  filter: contrast(1.05) brightness(1.05);
}

/* -------- پس‌زمینه صنعتی متحرک -------- */
.background-layer {
  position: fixed; inset: 0;
  background: repeating-linear-gradient(135deg, #0f0f0f, #141414 8px, #0f0f0f 16px);
  background-size: 250% 250%;
  opacity: 0.22;
  z-index: 0;
  animation: bgShift 38s linear infinite;
}
@keyframes bgShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* -------- نوار نور اسکن -------- */
.scan-line {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 55%, transparent 100%);
  left: -100%;
  animation: scanMove 9s linear infinite;
  mix-blend-mode: overlay;
  opacity: 0.35;
}
@keyframes scanMove { 0% { left: -100%; } 100% { left: 100%; } }

/* -------- کانتینر -------- */
.container {
  position: relative; z-index: 1;
  width: 90%; max-width: 800px;
  text-align: center; padding: 1rem;
  animation: fadeIn 1.6s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------- لوگو براق + فونت Orbitron برای انگلیسی -------- */
.site-name {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem; font-weight: 700;
  margin-bottom: 1.4rem;
  background: linear-gradient(120deg, #bcbcbc 0%, #f5f5f5 50%, #9a9a9a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(160,160,160,0.35);
  animation: shineLogo 8s ease-in-out infinite, floatLogo 4s ease-in-out infinite;
  cursor: default;
  backface-visibility: hidden;
}
.site-name::after {
  content: attr(data-text);
  position: absolute; left: 0; right: 0; top: 100%;
  transform: scaleY(-1);
  opacity: 0.25;
  filter: blur(1px) saturate(0.9);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  margin-top: 0.5rem;
}
@keyframes shineLogo { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes floatLogo { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* -------- متن اصلی فارسی -------- */
.hero-title {
  font-family: 'Vazirmatn', sans-serif;
  font-size: 1.6rem; margin-bottom: 1rem;
  color: #d2d2d2;
  opacity: 0;
  animation: typing 2s steps(22) 1 forwards, fadeText 2.4s ease 0.5s forwards;
  line-height: 1.8;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
@keyframes typing { from { width:0; } to { width:100%; } }
@keyframes fadeText { from { opacity:0; } to { opacity:1; } }

/* افکت flash subtle روی کلیک hero-title */
.hero-title.flash {
  animation: flashText 0.4s ease forwards;
}
@keyframes flashText {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

/* -------- توضیحات فارسی -------- */
.intro-text {
  font-family: 'Vazirmatn', sans-serif;
  font-size: 1rem; opacity: 0.85; margin-bottom: 1.4rem;
  line-height: 1.8;
  position: relative;
  overflow: hidden;
}
/* افکت نور متحرک روی intro-text */
.intro-text::before {
  content: '';
  position: absolute;
  top: 0; left: -90%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  animation: shineSub 3s ease-in-out infinite;
}
@keyframes shineSub { 0% { left: -90%; } 50% { left: 110%; } 100% { left: 110%; } }

/* -------- بقیه CSS (جزئیات، شبکه اجتماعی، CTA، جرقه‌ها) -------- */
.service-details { font-family: 'Vazirmatn', sans-serif; text-align: right; margin: 0 auto 1.8rem; max-width: 600px; color: #d5d5d5; line-height: 2.1; font-size: 0.95rem; border-right: 2px solid rgba(255,255,255,0.05); padding-right: 0.8rem; }
.service-details strong { display: block; margin-bottom: 0.8rem; font-size: 1.05rem; color: #e5e5e5; text-shadow: 0 0 6px rgba(255,255,255,0.15); font-weight: 600; }
.service-details ul { padding-right: 1.2rem; list-style: disc; }
.service-details li { margin-bottom: 0.5rem; }
.tagline { font-family: 'Vazirmatn', sans-serif; margin-bottom: 1.4rem; color: #bfbfbf; font-weight: 600; letter-spacing: 1px; }
.socials { display: flex; gap: 16px; justify-content: center; margin-bottom: 1.2rem; }
.socials a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #b0b0b0; font-size: 1.4rem; transition: all 0.35s ease-in-out; overflow: hidden; }
.socials a::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,255,255,0.15), transparent 70%); opacity: 0; transform: scale(0.6); transition: all 0.35s ease-in-out; }
.socials a:hover::before { opacity: 1; transform: scale(1.2); }
.socials a:hover { color: #fff; background: radial-gradient(circle at 30% 30%, #f4f4f4, #a9a9a9); box-shadow: 0 0 16px rgba(200,200,200,0.4); transform: rotate(3deg) scale(1.12); }
.cta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1.6rem; border: 1.5px solid #bfbfbf; border-radius: 999px; color: #bfbfbf; text-decoration: none; font-weight: 600; transition: all 0.45s ease-in-out; position: relative; overflow: hidden; }
.cta:hover { background: #d4d4d4; color: #0b0b0b; box-shadow: 0 0 20px rgba(0,0,0,0.25); }
.cta::after { content: ""; position: absolute; left: -100px; top: 0; width: 100px; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.22), transparent); transform: skewX(-20deg); transition: left 0.8s ease-in-out; }
.cta:hover::after { left: 120%; }
.spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff 0%, #f0f6fb 20%, rgba(255,255,255,0.7) 35%, rgba(200,200,200,0.15) 60%, transparent 100%); box-shadow: 0 0 6px rgba(255,255,255,0.85), 0 0 12px rgba(200,200,200,0.25); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.6); animation: sparkUp 700ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes sparkUp { 0% { opacity:1; transform: translateY(0) scale(0.8); filter: blur(0px); } 60% { opacity:0.9; transform: translateY(-22px) scale(1.1); filter: blur(0.2px); } 100% { opacity:0; transform: translateY(-48px) scale(1.6); filter: blur(0.8px); } }
.flash { filter: brightness(1.7); transition: filter 0.3s ease; }

/* -------- موبایل -------- */
@media (max-width:600px) { .background-layer { animation: none; background-size: 100% 100%; } }
@media (max-width:480px) { .site-name { font-size:2rem; } .hero-title { font-size:1.15rem; } .service-details { font-size:0.85rem; max-width:95%; line-height:2; } }