/* ==========================================================================
   لایهٔ غنی‌سازی بصری — هاله‌های متحرک، شیشه‌ای، درخشش
   ========================================================================== */

/* ---------------------------------------------------------- هالهٔ متحرک */
.aurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  animation: drift 22s var(--ease) infinite;
}
.aurora i:nth-child(1) {
  width: 560px; height: 560px; top: -180px; inset-inline-end: -120px;
  background: radial-gradient(circle, rgba(38,232,160,.55), transparent 70%);
  animation-duration: 24s;
}
.aurora i:nth-child(2) {
  width: 480px; height: 480px; top: 32%; inset-inline-start: -160px;
  background: radial-gradient(circle, rgba(15,181,204,.48), transparent 70%);
  animation-duration: 30s; animation-delay: -8s;
}
.aurora i:nth-child(3) {
  width: 400px; height: 400px; bottom: -140px; inset-inline-end: 22%;
  background: radial-gradient(circle, rgba(124,245,200,.38), transparent 70%);
  animation-duration: 27s; animation-delay: -15s;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(52px, 38px) scale(1.12); }
  50%      { transform: translate(-38px, 58px) scale(.94); }
  75%      { transform: translate(-52px, -28px) scale(1.08); }
}

/* حلقه‌های تزئینی متحرک */
.rings {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(38,232,160,.13);
}
.rings span { position: absolute; inset: 0; border-radius: 50%; border: inherit; }
.rings span:nth-child(1) { animation: spin 26s linear infinite; }
.rings span:nth-child(2) { animation: spin 40s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- سربرگ صفحه */
.phead {
  position: relative;
  margin: -20px 0 40px;
  padding: 46px 40px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(38,232,160,.16);
  background:
    linear-gradient(140deg, rgba(38,232,160,.11), rgba(15,181,204,.05) 55%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.phead::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 70% 90% at 30% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 0%, #000, transparent 75%);
}
.phead::after {
  content: ''; position: absolute; top: -60%; inset-inline-end: -12%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(38,232,160,.20), transparent);
  pointer-events: none;
}
.phead > * { position: relative; z-index: 1; }

.phead h1 {
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 900; letter-spacing: -1.2px; line-height: 1.35;
  margin: 6px 0 12px;
}
.phead p { color: var(--fg-dim); font-size: 16.5px; max-width: 660px; }
.phead .eyebrow { margin-bottom: 0; }

/* ---------------------------------------------------------- سربرگ هیرو */
.hero {
  position: relative;
  padding: 104px 0 84px;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: min(1000px, 120vw); height: 620px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(38,232,160,.17), transparent 62%);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}
.hero-in { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; text-align: center; }

.hero h1 {
  font-size: clamp(33px, 6.6vw, 62px);
  font-weight: 900; line-height: 1.26; letter-spacing: -2px;
  margin-bottom: 10px;
}
.hero p {
  color: var(--fg-dim); font-size: clamp(15.5px, 2.1vw, 19px);
  margin: 22px auto 0; line-height: 2.05; max-width: 660px;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }

/* ---------------------------------------------------------- کارت آماری */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 60px;
}
.stat {
  position: relative; overflow: hidden;
  padding: 26px 16px; text-align: center; border-radius: var(--r);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  transition: all var(--ease);
}
.stat::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 22%;
  height: 2px; background: var(--grad);
  transform: scaleX(0); transition: transform var(--ease);
}
.stat:hover { transform: translateY(-5px); border-color: rgba(38,232,160,.4); box-shadow: var(--sh-2); }
.stat:hover::before { transform: scaleX(1); }
.stat b {
  display: block; font-size: 30px; font-weight: 900; letter-spacing: -1.2px; line-height: 1.25;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; font-size: 12.5px; color: var(--fg-dim); margin-top: 3px; }

/* ---------------------------------------------------------- آیکون کارت */
.pcard-icon {
  width: 52px; height: 52px; border-radius: 15px;
  background: linear-gradient(150deg, rgba(38,232,160,.20), rgba(15,181,204,.10));
  border: 1px solid rgba(38,232,160,.28);
  color: var(--brand-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.pcard:hover .pcard-icon {
  background: linear-gradient(150deg, rgba(38,232,160,.32), rgba(15,181,204,.16));
  box-shadow: 0 10px 26px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---------------------------------------------------------- چیپ براق */
.chip {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-soft);
  transition: all var(--fast);
}
a.card:hover .chip {
  border-color: rgba(38,232,160,.3);
  background: var(--glow-2);
  color: var(--brand-3);
}

/* ---------------------------------------------------------- متن درخشان */
.shead h2 {
  background: linear-gradient(105deg, #fff 25%, var(--brand-3) 62%, #fff 95%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: -220% 0; } }

/* ---------------------------------------------------------- پلن ویژه */
.plan.best {
  border-color: rgba(38,232,160,.45);
  background:
    linear-gradient(165deg, rgba(38,232,160,.10), rgba(15,181,204,.03) 60%, transparent),
    linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  box-shadow: 0 20px 54px -24px var(--glow);
}
.plan.best .price { font-size: 36px; }
.plan::after {
  content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(38,232,160,.35), transparent);
  opacity: 0; transition: opacity var(--ease);
}
.plan:hover::after { opacity: 1; }

/* ---------------------------------------------------------- نوار ابزار شیشه‌ای */
.toolbar {
  background: rgba(16,24,40,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sh);
}

/* ---------------------------------------------------------- فاصله‌گذاری فشرده‌تر */
.section { padding: 66px 0; }

/* ---------------------------------------------------------- واکنش‌گرا */
@media (max-width: 860px) {
  .hero { padding: 64px 0 52px; }
  .phead { margin: -8px 0 30px; padding: 32px 24px; border-radius: 20px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 42px; }
  .section { padding: 52px 0; }
}

@media (max-width: 560px) {
  .phead { padding: 26px 20px; border-radius: 18px; }
  .phead p { font-size: 15px; }
  .stat { padding: 20px 12px; }
  .stat b { font-size: 24px; }
  .aurora i:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i, .hero::before, .shead h2 { animation: none !important; }
}