/**
 * هیرو — ترکیب‌بندی نامتقارن با کلاژِ تصاویر شناور
 * (به‌جای المان‌های روی‌هم‌افتاده‌ی نسخه‌ی قبل، اینجا هر لایه با
 * grid-area و z-index مشخص جای خودش را دارد — چیزی روی چیز دیگر
 * نمی‌افتد چون فاصله‌ها (gap/margin) از قبل حساب شده‌اند.)
 */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--header-h) + 40px) var(--sp-16);
    overflow: hidden;
}

.hero-bg-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.9;
}

.hero-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.035;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero .container {
    position: relative;
    z-index: var(--z-content);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}
@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
}

.hero-copy h1 {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-5);
}

.hero-copy h1 .accent {
    background: linear-gradient(
        100deg,
        var(--gold-300),
        var(--gold-500) 55%,
        var(--gold-700)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-copy .lead {
    font-size: 17.5px;
    color: var(--ink-500);
    max-width: 520px;
    line-height: 2;
}

.hero-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin-block: var(--sp-8);
}

.hero-meta-strip .item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hero-meta-strip .k {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-900);
}

.hero-meta-strip .v {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-100);
}

.hero-actions {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* ── کلاژ تصویری هیرو: سه قاب با چرخش ملایم، بدون تداخل ──
   نکته‌ی مهم: چون همه‌ی فرزندان position:absolute هستند، خودِ
   container هیچ اندازه‌ی ذاتی‌ای از محتوا نمی‌گیرد — پس باید width را
   با یک مقدار قطعی (نه شکل‌گیری خودکار بر پایه‌ی محتوا) مشخص کنیم،
   وگرنه کل کلاژ به عرض صفر جمع می‌شود (این باگ نسخه‌ی قبل بود). */
.hero-collage {
    position: relative;
    aspect-ratio: 1 / 1.05;
    width: min(100%, 480px);
    margin-inline-start: auto;
}

.hero-collage .frame {
    position: absolute;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line-2);
}

.hero-collage .frame-main {
    width: 78%;
    height: 70%;
    top: 0;
    right: 0;
    z-index: 3;
}

.hero-collage .frame-accent-1 {
    width: 46%;
    height: 40%;
    bottom: 6%;
    left: 0;
    z-index: 4;
    transform: rotate(-4deg);
    animation: floatY 10s ease-in-out infinite;
}

.hero-collage .frame-accent-2 {
    width: 30%;
    height: 26%;
    top: 8%;
    left: -4%;
    z-index: 2;
    transform: rotate(6deg);
    animation: floatY 12s ease-in-out infinite reverse;
}

.hero-collage .ring-deco {
    position: absolute;
    inset: -8%;
    border: 1px dashed var(--line-2);
    border-radius: 50%;
    z-index: 1;
    animation: spin 60s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .hero-collage {
        margin-inline: auto;
        width: min(100%, 380px);
        margin-top: var(--sp-10);
    }
}
@media (max-width: 480px) {
    .hero-collage {
        width: min(100%, 300px);
    }
}

/* نشان شناور آماری روی کلاژ — با مقادیر ثابت CSS، نه inline، تا در
   موبایل هم همیشه داخل محدوده بماند و از باکس خارج نزند */
.hero-float-badge {
    bottom: 6%;
    right: -6%;
}
@media (max-width: 980px) {
    .hero-float-badge {
        bottom: -6%;
        right: 6%;
    }
}
@media (max-width: 480px) {
    .hero-float-badge {
        bottom: -8%;
        right: 2%;
        padding: 10px 14px;
    }
    .hero-float-badge strong {
        font-size: 15px;
    }
}

.hero-scroll-hint {
    position: absolute;
    bottom: var(--sp-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ink-700);
    z-index: var(--z-content);
}

.hero-scroll-hint .line {
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--gold-500), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* ── نوار آمار: کمی روی پایین هیرو سوار می‌شود، اما فقط با margin منفی
     محاسبه‌شده — نه position:absolute روی چیز دیگر ── */
.stats-strip {
    margin-top: -54px;
    position: relative;
    z-index: var(--z-content);
}
/* .stats-strip .g { } */

/* ── مارکی (نوار کشورها) ── */
.marquee-wrap {
    overflow: hidden;
    border-block: 1px solid var(--line-1);
    padding-block: var(--sp-5);
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 8%,
        #000 92%,
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 8%,
        #000 92%,
        transparent
    );
    /* والد را عمداً LTR می‌کنیم: در RTL، بلوکِ عریض‌تر از والدش سرریزش
       را به چپ آویزان می‌کند (یعنی حالت استراحت از قبل عمیقاً بیرون از
       دید، به چپ بود) و translateX(-50%) آن را حتی بیشتر به چپ می‌فرستاد
       تا کاملاً از صفحه خارج شود — همان باگِ «نوار گاهی خالی می‌شد».
       با LTR‌کردنِ والد، سرریز به‌درستی از راست آویزان می‌شود و اسلاید
       از راست به چپ، همیشه-پر و بدون‌درز کار می‌کند. */
    direction: ltr;
}

.marquee-track {
    display: flex;
    gap: var(--sp-10);
    width: max-content;
    animation: marqueeScroll 38s linear infinite reverse;
}

.marquee-track:hover {
    animation-play-state: paused;
}
@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.marquee-track .m-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 15px;
    color: var(--ink-700);
    white-space: nowrap;
    direction: rtl; /* تا ترتیب آیکون+متنِ داخل هر آیتم درست بماند */
}

.marquee-track .m-item svg {
    width: 16px;
    height: 16px;
    stroke: var(--gold-700);
}

/* ═══════════ اسپانسرها — مارکی لوگوها (همان تکنیکِ درستِ نوار کشورها) ═══════════ */
.sponsor-marquee-wrap {
    overflow: hidden;
    padding-block: var(--sp-4);
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
    direction: ltr;
}

.sponsor-marquee-track {
    display: flex;
    align-items: center;
    gap: var(--sp-16);
    width: max-content;
    animation: marqueeScroll 32s linear infinite reverse;
}

.sponsor-marquee-track:hover {
    animation-play-state: paused;
}

.sponsor-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    flex-shrink: 0;
    direction: rtl;
}

.sponsor-item img {
    max-height: 100px;
    max-width: 320px;
    width: auto;
    object-fit: contain;
    opacity: 0.75;
    filter: grayscale(15%);
    transition: opacity 0.3s, filter 0.3s;
}

.sponsor-item img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.sponsor-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 150px;
    border: 1px dashed var(--line-2);
    border-radius: var(--r-md);
    font-size: 12px;
    color: var(--ink-900);
    white-space: nowrap;
}