/* Scope Root */
.ms-widesh-hero-300{
  --fade-top: clamp(120px, 14vw, 260px);   /* ارتفاع سفیدیِ بالای ماژول */
  color: var(--fg);
  background:
    /* فیدِ سفیدِ بالایی؛ مرز را محو می‌کند */
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) var(--fade-top)),
    /* هالهٔ بنفش/سبز؛ مرکز را کمی پایین‌تر می‌آوریم */
    radial-gradient(1200px 600px at 80% 8%, #2a1b56 0%, transparent 60%),
    #0b0c1a;
}

  .ms-widesh-hero-300{
    background:
      linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) var(--fade-top)),
      radial-gradient(1200px 600px at 80% 8%, #e8e6ff 0%, transparent 60%),
      #f7f8ff;
  }


/* Aurora animated background */
.ms-widesh-hero-300 .msh300-aurora{
  /* جای قبلی‌اش را دست نزن؛ فقط این‌ها را اضافه کن */
  --push-down: clamp(80px, 10vw, 180px);         /* کمی هاله‌ها را پایین‌تر می‌برد */
  top: calc(-20% + var(--push-down));            /* چون قبلش inset داده بودی، همین یک خط کافی است */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) var(--fade-top),               /* تا ارتفاع سفید، کاملاً پنهان */
    rgba(0,0,0,1) calc(var(--fade-top) + 48px),  /* گذار نرم */
    rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent var(--fade-top),
    black calc(var(--fade-top) + 48px),
    black 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
/* subtle floating particles */
.ms-widesh-hero-300 .msh300-particles{ position:absolute; inset:0; pointer-events:none; }
.ms-widesh-hero-300 .msh300-particles span{
  position:absolute; width:6px; height:6px; background:rgba(88,196,255,.9); border-radius:50%;
  filter: blur(.5px); opacity:.7; animation: msh300-bubble 12s linear infinite;
}
.ms-widesh-hero-300 .msh300-particles span:nth-child(2){ left:10%; top:65%; animation-duration:14s; background:rgba(124,108,255,.9) }
.ms-widesh-hero-300 .msh300-particles span:nth-child(3){ left:30%; top:20%; animation-duration:16s; width:8px; height:8px }
.ms-widesh-hero-300 .msh300-particles span:nth-child(4){ left:70%; top:35%; animation-duration:18s; background:rgba(34,211,238,.9) }
.ms-widesh-hero-300 .msh300-particles span:nth-child(5){ left:85%; top:75%; animation-duration:20s; width:5px; height:5px }
@keyframes msh300-bubble{
  0%{ transform: translateY(0) translateX(0); opacity:.6 }
  50%{ transform: translateY(-20px) translateX(10px); opacity:.9 }
  100%{ transform: translateY(0) translateX(0); opacity:.6 }
}

/* Layout */
.ms-widesh-hero-300 .msh300-container{
  max-width: 1200px; margin: 0 auto; display:grid; align-items:center; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 960px){
  .ms-widesh-hero-300 .msh300-container{ grid-template-columns: 1fr; }
}

/* Left side */
.ms-widesh-hero-300 .msh300-badge{
  display:inline-flex; align-items:baseline; gap:.5rem; padding:.45rem .85rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.ms-widesh-hero-300 .msh300-badge-pre{ color:#d1d7ff; font-weight:800; font-size:.95rem }
.ms-widesh-hero-300 .msh300-number{
  font-family:"Lalezar", ui-sans-serif; font-size: clamp(32px, 6.2vw, 86px); line-height:1;
  background: linear-gradient(90deg, var(--ink), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
  position:relative; isolation:isolate;
}
.ms-widesh-hero-300 .msh300-number::after{
  content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,.15), transparent 60%);
  mix-blend-mode: screen; transform: translateX(-100%); animation: msh300-shine 3.2s ease-in-out infinite;
}
@keyframes msh300-shine{ 0%,10%{transform:translateX(-110%)} 45%{transform:translateX(30%)} 100%{transform:translateX(110%)} }

.ms-widesh-hero-300 .msh300-badge-suf{
  color:#d1d7ff; font-weight:900; letter-spacing:.2px; white-space:nowrap;
}

.ms-widesh-hero-300 .msh300-title{
  margin:.6rem 0 0 0; font-family:"Lalezar", ui-sans-serif;
  font-size: clamp(22px, 3.6vw, 46px); letter-spacing:.2px;
  text-shadow: 0 10px 30px rgba(88,196,255,.25);
}
.ms-widesh-hero-300 .msh300-subtitle{
  margin:.6rem 0 0 0; color:var(--muted); font-size: clamp(14px, 1.4vw, 18px); line-height:1.9;
}

.ms-widesh-hero-300 .msh300-cta{ margin-top: 1.1rem; }
.ms-widesh-hero-300 .msh300-btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.75rem 1.1rem; border-radius:14px;
  color:#fff; text-decoration:none; font-weight:900;
  background: linear-gradient(90deg, var(--ink), var(--accent));
  box-shadow: 0 14px 40px rgba(88,196,255,.28);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.ms-widesh-hero-300 .msh300-btn:hover{ transform: translateY(-2px); }
.ms-widesh-hero-300 .msh300-btn:active{ transform: translateY(0); opacity:.96 }

.ms-widesh-hero-300 .msh300-hint{
  margin-top: .8rem; display:flex; align-items:center; gap:.5rem; color:#cbd5ff; font-size:.9rem; opacity:.9;
}

/* Right visual */
.ms-widesh-hero-300 .msh300-figure{
  background: linear-gradient(180deg, rgba(124,108,255,.18), rgba(34,211,238,.18));
  border:1px solid rgba(255,255,255,.18); border-radius: 22px; overflow:hidden;
  box-shadow: var(--shadow); transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform .14s ease;
}
.ms-widesh-hero-300 .msh300-figure img{ display:block; width:100%; height:auto; }

/* Scroll hint */
.ms-widesh-hero-300 .msh300-scroll-hint{
  position:absolute; left:50%; bottom:18px; transform: translateX(-50%);
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06); color:#fff; display:grid; place-items:center;
  box-shadow: var(--shadow); cursor:pointer; transition: transform .2s ease, opacity .2s ease;
}
.ms-widesh-hero-300 .msh300-scroll-hint:hover{ transform: translateX(-50%) translateY(-2px); }

/* Responsive tweaks */
@media (max-width: 520px){
  .ms-widesh-hero-300{ padding: 28px 14px }
  .ms-widesh-hero-300 .msh300-badge{ padding:.35rem .75rem }
}
/* === Typography Color Upgrade (scoped) === */
.ms-widesh-hero-300 {
  --ink: #0ea5e9;      /* cyan */
  --accent: #6366f1;   /* indigo */
  --accent2: #a855f7;  /* purple */
  --title-shadow: 0 14px 42px rgba(99,102,241,.28);font-family: iransans;
}

/* تیتر: گرادیان خوانا + سایه نرم */
.ms-widesh-hero-300 .msh300-title{
  color: transparent;
  background: linear-gradient(90deg, var(--ink) 0%, var(--accent) 55%, var(--accent2) 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: var(--title-shadow);
}

/* زیرتیتر: کنتراست بهتر روی هر تم */
.ms-widesh-hero-300 .msh300-subtitle{ color:#3b425a }
/* بج ۳۰۰٪: پیشوند/پسوند پررنگ‌تر و هماهنگ با گرادیان عدد */
.ms-widesh-hero-300 .msh300-badge-pre,
.ms-widesh-hero-300 .msh300-badge-suf{
  color:#6b74ff; font-weight:900;
}
/* دکمه CTA: گرادیان براق‌تر و حلقه فوکِس واضح‌تر */
.ms-widesh-hero-300 .msh300-btn{
  background: linear-gradient(90deg, var(--ink), var(--accent));
  box-shadow: 0 16px 44px rgba(14,165,233,.32);
}
.ms-widesh-hero-300 .msh300-btn:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--ink) 65%, white);
  outline-offset: 2px;
}

/* نکته‌ی زیر دکمه */
.ms-widesh-hero-300 .msh300-hint{ color:#7b83a8 }
/* کارت تصویر: حاشیه و نورپردازی کمی زنده‌تر (بدون تغییر اندازه/چیدمان) */
.ms-widesh-hero-300 .msh300-figure{
  border:1px solid color-mix(in oklab, var(--accent) 22%, rgba(255,255,255,.18));
  box-shadow: 0 24px 60px rgba(15,23,42,.18), inset 0 0 0 1px rgba(255,255,255,.08);
}
/* --- Fix: clickable text & buttons (z-index + pointer-events) --- */
.ms-widesh-hero-300{ position: relative; }

/* لایه‌های تزئینی فقط نمایشی‌اند؛ نباید ایونت بگیرند */
.ms-widesh-hero-300 .msh300-aurora,
.ms-widesh-hero-300 .msh300-particles,
.ms-widesh-hero-300 .msh300-number::after{
  pointer-events: none;
  z-index: 0;
}

/* محتوای اصلی بالاتر از بک‌گراند */
.ms-widesh-hero-300 .msh300-container,
.ms-widesh-hero-300 .msh300-left,
.ms-widesh-hero-300 .msh300-right{
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}

/* دکمه و CTA قطعاً قابل کلیک باشند */
.ms-widesh-hero-300 .msh300-cta,
.ms-widesh-hero-300 .msh300-btn{
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* تصویر و اسکرول‌هینت هم در لایهٔ درست باشند */
.ms-widesh-hero-300 .msh300-figure{ position: relative; z-index: 1; }
.ms-widesh-hero-300 .msh300-scroll-hint{ position:absolute; z-index:4; pointer-events:auto; }