/**
 * بومِ یکپارچهٔ صفحهٔ نخستِ آکادمی (۳.۷.۱۷)
 * ------------------------------------------------------------
 * به‌جای اینکه هر بخش پس‌زمینه/الگوی خودش را داشته باشد (نوارِ رنگیِ دوره‌ها و مراحل، الگوی نقطه‌ای و
 * نورِ اختصاصیِ اپلیکیشن، دایره‌های مزیت‌ها، خط‌های جداکننده، …)، کلِ صفحه یک بومِ پیوسته دارد:
 *   ۱) همان رنگِ پس‌زمینهٔ قالب (--bm-bg) — بدونِ تغییر
 *   ۲) شبکهٔ هندسیِ بسیار کم‌رنگ، ادامهٔ همان شبکهٔ هیرو (همان فاصلهٔ خانه‌ها)، محو در لبه‌ها
 *   ۳) بافتِ دانه‌دارِ ظریف (grain) — ترندِ ۲۰۲۶، ثابت و بدونِ انیمیشن
 *   ۴) چند نورِ ملایم با رنگِ برند در طولِ صفحه (چپ/راست به تناوب)
 * هیرو: شبکهٔ متحرکش حفظ شده و فقط پایینش نرم محو می‌شود تا به بومِ صفحه بپیوندد.
 * همه‌چیز فقط داخلِ .pg-home (چیدمانِ آکادمی)؛ هیچ بخشِ دیگری از سایت تغییر نمی‌کند.
 */
.pg-home {
    --pgc-grid: 92px;
    --pgc-line: rgba(86, 89, 245, .045);
    --pgc-glow-1: rgba(86, 89, 245, .06);
    --pgc-glow-2: rgba(14, 165, 233, .05);
    --pgc-grain: .028;
    --pgc-hero-fade-start: 520px;
    --pgc-hero-fade-end: 860px;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle 640px at 88% 13%, var(--pgc-glow-1), transparent 70%),
        radial-gradient(circle 560px at 8% 31%, var(--pgc-glow-2), transparent 70%),
        radial-gradient(circle 680px at 92% 52%, var(--pgc-glow-1), transparent 70%),
        radial-gradient(circle 560px at 6% 72%, var(--pgc-glow-2), transparent 70%),
        radial-gradient(circle 620px at 84% 92%, var(--pgc-glow-1), transparent 70%),
        var(--bg);
}
:root[data-theme="dark"] .pg-home {
    --pgc-line: rgba(124, 124, 255, .055);
    --pgc-glow-1: rgba(124, 124, 255, .075);
    --pgc-glow-2: rgba(56, 189, 248, .05);
    --pgc-grain: .035;
}

/* ۲) شبکهٔ هندسی — پشتِ هیرو پنهان است (هیرو شبکهٔ متحرکِ خودش را دارد) و از پایینِ هیرو نرم ظاهر می‌شود */
.pg-home::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(var(--pgc-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--pgc-line) 1px, transparent 1px);
    background-size: var(--pgc-grid) var(--pgc-grid);
    background-position: center top;
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, transparent var(--pgc-hero-fade-start), #000 var(--pgc-hero-fade-end)),
        linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, transparent 0, transparent var(--pgc-hero-fade-start), #000 var(--pgc-hero-fade-end)),
        linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect;
}

/* ۳) بافتِ دانه‌دار (یک کاشیِ کوچکِ ثابت؛ هزینهٔ رندرِ ناچیز) */
.pg-home::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: var(--pgc-grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

@media (max-width: 899px) {
    .pg-home { --pgc-grid: 78px; --pgc-hero-fade-start: 640px; --pgc-hero-fade-end: 980px; }
}
@media (max-width: 559px) {
    .pg-home { --pgc-grid: 68px; --pgc-hero-fade-start: 720px; --pgc-hero-fade-end: 1060px; }
    .pg-home::before {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent var(--pgc-hero-fade-start), #000 var(--pgc-hero-fade-end));
        mask-image: linear-gradient(to bottom, transparent 0, transparent var(--pgc-hero-fade-start), #000 var(--pgc-hero-fade-end));
    }
}

/* ---------- هیرو: شفاف روی بوم + محوشدنِ نرمِ پایینِ شبکهٔ متحرک ---------- */
.pg-home .ph-hero { background: transparent; }
.pg-home .ph-network-canvas {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
}

/* ---------- حذفِ پس‌زمینه‌ها و خط‌های اختصاصیِ هر بخش ---------- */
/* نوارهای رنگیِ «محبوب‌ترین دوره‌ها» و «۴ قدم» (استایلِ درون‌خطی) */
.pg-home > section[style*="background:var(--surface-2)"] {
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}
/* اپلیکیشن: نورها، الگوی نقطه‌ای و دانه‌ی اختصاصی (نورِ پشتِ خودِ موبایل حفظ می‌شود) */
.pg-home .pg-appx { background: transparent; border-block: 0; }
.pg-home .pg-appx-grid-pattern, .pg-home .pg-appx-noise { display: none; }
/* آخرین مقالات */
.pg-home .pg-journal { background: transparent; border-block: 0; }
/* شمارنده و دسته‌بندی (از قبل شفاف؛ برای اطمینان) */
.pg-home section.pgk-wrap, .pg-home .pcx-sec { background: transparent; }

/* ============================================================
   ۵) ریتمِ بخش‌ها (۳.۷.۲۱) — یک‌درمیان «روشن / پررنگ»
   بخش‌های «پررنگ» یک نوارِ تمام‌عرضِ کمی تیره‌تر (با ته‌رنگِ برند) و دو خطِ مویی دارند؛
   بخش‌های «روشن» همان بومِ شبکه‌دار می‌مانند → جداکنندهٔ طبیعی بینِ بخش‌ها.
   نوار با border-image (outset) تمام‌عرض می‌شود، حتی برای بخش‌هایی که خودشان max-width دارند؛
   بدونِ شبه‌المان و بدونِ اثر روی چیدمان.
   ترتیب: دسته‌بندی‌ها● دوره‌ها○ مسیرهای یادگیری● اپ○ مدرسان● ۴قدم○ نظرات● سؤالات+بنر○ مقالات●
   (اگر بخشِ «آنچه دانشجویان می‌گویند» نمایش داده شود، از آن به بعد ترتیب یک خانه جابه‌جا می‌شود)
   ============================================================ */
.pg-home {
    --pgc-band: color-mix(in srgb, var(--bm-primary) 5%, color-mix(in srgb, #0f172a 3%, var(--bg)));
    --pgc-band-line: color-mix(in srgb, var(--bm-primary) 13%, transparent);
}
:root[data-theme="dark"] .pg-home {
    --pgc-band: color-mix(in srgb, var(--bm-primary) 6%, color-mix(in srgb, #fff 3.5%, var(--bg)));
    --pgc-band-line: rgba(255, 255, 255, .07);
}
.pg-home > .pcx-sec,
.pg-home > .pcs,
.pg-home > .pgp,
.pg-home > .pg-sec-instructors,
.pg-home > .pgr,
.pg-home > .pg-journal,
.pg-home:has(> .pg-testi) > .pg-sec-steps,
.pg-home:has(> .pg-testi) > .pgq,
.pg-home:has(> .pg-testi) > .pga {
    border-image: linear-gradient(to bottom, var(--pgc-band-line) 0 1px, var(--pgc-band) 1px calc(100% - 1px), var(--pgc-band-line) calc(100% - 1px)) fill 0 // 0 100vmax;
}
.pg-home:has(> .pg-testi) > .pgr,
.pg-home:has(> .pg-testi) > .pg-journal { border-image: none; }
/* بنرِ پایانی به سؤالات چسبیده است: خطِ جداکننده بینِ این دو حذف */
.pg-home:has(> .pg-testi) > .pgq {
    border-image: linear-gradient(to bottom, var(--pgc-band-line) 0 1px, var(--pgc-band) 1px) fill 0 // 0 100vmax;
}
.pg-home:has(> .pg-testi) > .pga {
    border-image: linear-gradient(to bottom, var(--pgc-band) 0 calc(100% - 1px), var(--pgc-band-line) calc(100% - 1px)) fill 0 // 0 100vmax;
}
/* اسلایدرِ دسته‌بندیِ موبایل رنگِ پس‌زمینهٔ خودش را داشت */
.pg-home > .pcs { background: transparent; }

@media (prefers-reduced-transparency: reduce) {
    .pg-home::after { display: none; }
}