/*!
 * ============================================================
 *  HAKIMI TECH — Enhancement layer (enhance.css)
 * ------------------------------------------------------------
 *  لایه‌ی افزودنیِ ارتقای طراحی. روی main.css سوار می‌شود و فقط
 *  «بهترش» می‌کند؛ ساختار/محتوا/چیدمانِ اصلی دست‌نخورده می‌ماند.
 *
 *  1) اسکرول‌ریویلِ نرم‌تر
 *  2) هیروِ بزرگ‌تر و چشمگیرتر (تایپوگرافی + گرادیانتِ متحرک)
 *  3) فاصله‌گذاریِ لوکس‌تر (فضای خالیِ بیشتر)
 *  4) میکرو-اینتراکشن‌ها (هاور/ترنزیشنِ ظریف)
 *
 *  همه‌چیز با prefers-reduced-motion امن است.
 * ============================================================ */

/* ============================================================
   1) SCROLL REVEAL — نرم‌تر، با حرکت و بلورِ ظریف
   (سیستمِ .hkm-reveil/.is-visible از قبل هست؛ فقط ارتقا می‌دهیم)
   ============================================================ */
.hkm-reveal{
	opacity:0;
	transform:translateY(28px);
	filter:blur(6px);
	transition:
		opacity   .8s cubic-bezier(.16,1,.3,1),
		transform .8s cubic-bezier(.16,1,.3,1),
		filter    .8s cubic-bezier(.16,1,.3,1);
	will-change:opacity,transform;
}
.hkm-reveal.is-visible{
	opacity:1;
	transform:none;
	filter:blur(0);
}

/* ============================================================
   2) HERO — بزرگ‌تر، بولدتر، با گرادیانتِ متحرک
   ============================================================ */
.hkm-hero{
	padding-top:calc(var(--hkm-nav-h, 68px) + 5rem);
	padding-bottom:7rem;
}
.hkm-hero__h1{
	font-size:clamp(3rem, 7vw, 6.25rem);
	line-height:1.02;
	letter-spacing:-.035em;
	margin-bottom:1.75rem;
}
/* گرادیانتِ متحرکِ واژه‌های تأکیدی در هیرو */
.hkm-hero__h1 .hkm-grad-text,
.hkm-grad-text{
	background:linear-gradient(
		100deg,
		var(--hkm-emerald) 0%,
		var(--hkm-cyan) 45%,
		var(--hkm-emerald) 90%
	);
	background-size:200% auto;
	-webkit-background-clip:text;background-clip:text;
	-webkit-text-fill-color:transparent;color:transparent;
	animation:hkmGradFlow 6s linear infinite;
}
@keyframes hkmGradFlow{
	to{background-position:200% center}
}
.hkm-hero__desc{
	font-size:clamp(1.05rem, 2vw, 1.3rem);
	max-width:640px;
	margin-bottom:3.25rem;
	line-height:1.65;
}
/* هاله‌ی زنده‌ترِ پشتِ هیرو */
.hkm-hero::after{
	content:"";
	position:absolute;inset:0;z-index:-1;pointer-events:none;
	background:
		radial-gradient(50vw 42vh at 50% 8%, rgba(20,115,230,.14), transparent 70%),
		radial-gradient(38vw 32vh at 82% 92%, rgba(35,213,255,.08), transparent 72%);
}
/* اعدادِ آماری کمی چشمگیرتر */
.hkm-hero__stat-num,
.hkm-counter{
	font-size:clamp(1.9rem, 3.4vw, 2.6rem);
	letter-spacing:-.02em;
}

/* ============================================================
   3) SPACING — ریتمِ لوکس‌تر و فضای خالیِ بیشتر
   ============================================================ */
:root{
	--hkm-space-lg:5.5rem;
}
.hkm-section{
	padding-top:7rem;
	padding-bottom:7rem;
}
.hkm-section-header{
	margin-bottom:4.5rem;
}
.hkm-section-title{
	font-size:clamp(2rem, 4vw, 3.15rem);
	letter-spacing:-.025em;
	line-height:1.1;
}
.hkm-section-label{
	letter-spacing:.16em;
	margin-bottom:1rem;
}
.hkm-section-desc{
	font-size:clamp(1rem, 1.6vw, 1.15rem);
	max-width:600px;
	line-height:1.6;
}
/* فاصله‌ی نفس‌کشیدنِ بیشتر بین کارت‌ها */
.hkm-bento,
.hkm-price-grid,
.hkm-tgrid{
	gap:1.75rem;
}
.hkm-card{
	padding:2.25rem;
}

/* ============================================================
   4) MICRO-INTERACTIONS — هاور/ترنزیشنِ ظریف
   ============================================================ */

/* کارت‌ها: بلندشدنِ نرم + گلوِ برند */
.hkm-card,
.hkm-pcard,
.hkm-tcard{
	transition:
		transform .35s cubic-bezier(.16,1,.3,1),
		border-color .35s ease,
		box-shadow .35s ease,
		background-color .35s ease;
}
.hkm-card:hover,
.hkm-tcard:hover{
	transform:translateY(-6px);
	border-color:rgba(20,115,230,.45);
	box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 30px rgba(20,115,230,.12);
}
.hkm-pcard:hover{
	transform:translateY(-6px);
	box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.hkm-pcard--hot:hover{
	box-shadow:0 22px 60px rgba(0,0,0,.4), 0 0 40px rgba(20,115,230,.18);
}

/* آیکونِ کارت: چرخش/بزرگ‌نماییِ ظریف هنگام هاورِ کارت */
.hkm-card__icon{
	transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.hkm-card:hover .hkm-card__icon{
	transform:translateY(-3px) scale(1.06);
}

/* دکمه‌ها: فشرده‌شدنِ ظریف + گلو */
.hkm-btn,
.hkm-btn--primary,
.hkm-btn--ghost{
	transition:
		transform .2s cubic-bezier(.16,1,.3,1),
		background-color .25s ease,
		border-color .25s ease,
		box-shadow .25s ease,
		color .25s ease;
}
.hkm-btn--primary:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 26px rgba(20,115,230,.30);
}
.hkm-btn:active{transform:translateY(0) scale(.985)}

/* چیپ‌های تکنولوژی و پیل‌ها */
.hkm-stack-chip,
.hkm-tag{
	transition:color .25s ease, border-color .25s ease, background-color .25s ease, transform .2s ease;
}
.hkm-stack-chip:hover{
	color:var(--hkm-text);
	border-color:rgba(20,115,230,.45);
	transform:translateY(-2px);
}

/* آیتم‌های FAQ */
.hkm-faq-item{
	transition:border-color .3s ease, background-color .3s ease;
}

/* لینک‌های زیرخط‌دارِ متحرک (ناوبری/محتوا) */
.hkm-nav__link{
	transition:color .25s ease;
}

/* اعدادِ فرایند: هاله هنگام هاورِ استپ */
.hkm-process__num{
	transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.hkm-process__step:hover .hkm-process__num{
	transform:translateY(-4px);
	box-shadow:0 0 26px rgba(20,115,230,.25);
	border-color:rgba(20,115,230,.45);
}

/* ستاره‌های نظرات: درخششِ ظریف */
.hkm-tcard__stars{
	transition:filter .3s ease;
}
.hkm-tcard:hover .hkm-tcard__stars{
	filter:drop-shadow(0 0 8px rgba(35,213,255,.5));
}

/* ============================================================
   ACCESSIBILITY — احترام به کاهشِ حرکت
   ============================================================ */
@media (prefers-reduced-motion: reduce){
	.hkm-reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
	.hkm-grad-text{animation:none !important}
	.hkm-card:hover,.hkm-pcard:hover,.hkm-tcard:hover,
	.hkm-btn--primary:hover,.hkm-stack-chip:hover,
	.hkm-card:hover .hkm-card__icon,
	.hkm-process__step:hover .hkm-process__num{
		transform:none !important;
	}
	*{scroll-behavior:auto !important}
}