/* ===== صفحه اصلی — چیدمان کیهانی ===== */
.hero{padding:0 0 var(--sp-4);text-align:center;position:relative;z-index:2;}
/* رفع نواقص — بخش F: پس‌زمینه‌ی کهکشانی هوم (کانواس #heroGalaxyCanvas از
   assets/js/hero-galaxy.js پر می‌شود) + بزرگ‌تر و پویا شدن متن زیرِ لوگو. */
.hero-galaxy{border-radius:28px;overflow:hidden;padding:56px 20px 48px;background:#05060f;isolation:isolate;}
.hero-galaxy #heroGalaxyCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;}
.hero-galaxy h1,.hero-galaxy .hero-lead-anim{position:relative;z-index:2;}
/* رفع نواقص (دور دوم، CRITICAL 7): این سلکتور عمداً «.hero .lead.hero-lead-anim»
   نوشته شده (نه فقط «.hero-lead-anim») چون قانون قدیمی‌تر «.hero .lead» دو
   کلاس دارد (specificity 0,2,0) و بدون این، رویش برنده می‌شد — یعنی
   font-size و color اصلاً به مقدار جدید تغییر نمی‌کردند (متن هیچ‌وقت واقعاً
   بزرگ‌تر نشده بود، و چون color به رنگ توپر قدیمی برمی‌گشت، shimmer/gradient
   هم کاملاً نامرئی می‌ماند — این دقیقاً همان چیزی بود که کاربر «بدون
   انیمیشن متن» گزارش کرد). با سه کلاس (0,3,0) قطعی برنده می‌شود. */
.hero .lead.hero-lead-anim{
  margin-top:22px;font-size:clamp(2.1rem,6vw,3.2rem);font-weight:700;color:#f4f0ff;max-width:720px;margin-inline:auto;
  position:relative;
  text-shadow:0 0 18px rgba(244,240,255,.55),0 0 38px rgba(124,58,237,.65),0 0 74px rgba(59,130,246,.45);
}
/* بخش F (دور دوم): انیمیشن ورود پلکانی واقعی — هر کلمه با تأخیر جداگانه وارد
   می‌شود (blur+translateY+scale)، به‌جای یک fade یکجا که عملاً حس «انیمیشن»
   نمی‌داد. کلمات با JS (hero-galaxy.js → splitHeroWords) به span تبدیل می‌شوند. */
.hero .lead.hero-lead-anim .hero-word{
  display:inline-block;opacity:0;transform:translateY(22px) scale(.94);filter:blur(4px);
  animation:heroWordIn .7s cubic-bezier(.22,.9,.32,1) forwards;
}
@keyframes heroWordIn{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}
/* shimmer واقعی: یک نوار نور مورب که هر چند ثانیه از روی متن رد می‌شود —
   mix-blend-mode:overlay یعنی روی هر رنگ زمینه‌ای درست به‌نظر می‌رسد، برخلاف
   نسخه‌ی قبلی که با background-clip:text قاطی رنگ اصلی متن می‌شد. */
.hero .lead.hero-lead-anim::after{
  content:"";position:absolute;inset:-10px -6px;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(34,211,238,.55) 52%,transparent 70%);
  background-size:250% 100%;mix-blend-mode:overlay;
  animation:heroShimmerSweep 3.2s ease-in-out 1.8s infinite;
}
@keyframes heroShimmerSweep{0%{background-position:150% 0;}100%{background-position:-50% 0;}}
@media (prefers-reduced-motion: reduce){
  .hero .lead.hero-lead-anim .hero-word{animation:none;opacity:1;transform:none;filter:none;}
  .hero .lead.hero-lead-anim::after{animation:none;display:none;}
}
.hero h1{font-family:var(--font-en);font-size:clamp(2.6rem,9vw,5.2rem);font-weight:700;letter-spacing:1px;}
.hero h1 span{color:var(--brand);}
.hero .lead{margin-top:18px;font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--ink-1);max-width:560px;margin-inline:auto;}
.hero .lead b{color:var(--accent);font-weight:600;}
.hero-ctas{display:flex;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-6);flex-wrap:wrap;}
.hero-stats{display:flex;gap:var(--sp-6);justify-content:center;margin-top:var(--sp-7);flex-wrap:wrap;}
.hero-stats .stat b{font-size:var(--fs-xl);font-family:var(--font-en);display:block;color:var(--ink-0);}
.hero-stats .stat span{font-size:var(--fs-xs);color:var(--ink-2);}

.section{padding:var(--sp-8) 0;position:relative;z-index:2;}
.section-head{text-align:center;margin-bottom:var(--sp-6);}
.section-head h2{font-family:var(--font-en);font-size:clamp(1.9rem,4vw,2.5rem);font-weight:700;}
.section-head p{color:var(--ink-2);margin-top:10px;max-width:520px;margin-inline:auto;}

.grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
.grid-cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}

footer{border-top:1px solid var(--line);padding:var(--sp-7) 0;color:var(--ink-2);font-size:var(--fs-sm);text-align:center;position:relative;z-index:2;}
.note{margin-top:var(--sp-5);font-size:.8rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:16px;}

/* ===== Why-us section ===== */
.why-section{max-width:1100px;margin:var(--sp-9) auto 0;}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);margin-top:var(--sp-5);}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);text-align:center;transition:transform .25s ease,border-color .25s ease;}
.why-card:hover{transform:translateY(-4px);border-color:var(--line-strong);}
.why-ico{font-size:1.8rem;display:block;margin-bottom:var(--sp-2);}
.why-card h3{font-size:var(--fs-md);margin:0 0 6px;}
.why-card p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.7;margin:0;}

/* ===== Stats bar ===== */
.stats-bar{max-width:900px;margin:var(--sp-8) auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);text-align:center;}
.stat-item strong{display:block;font-family:var(--font-en);font-size:var(--fs-2xl);color:var(--brand);}
.stat-item span{color:var(--ink-2);font-size:var(--fs-sm);}

/* ===== Home preview sections ===== */
.home-preview{max-width:1100px;margin:var(--sp-9) auto 0;}
.home-preview .section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2);text-align:start;}
.home-preview .section-head p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);}
.energy-preview,.trading-preview{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7) var(--sp-5);}
.energy-preview .section-head,.trading-preview .section-head{justify-content:center;text-align:center;}
.energy-preview-text{color:var(--ink-2);max-width:520px;margin:0 auto var(--sp-4);}
.tv-widget-container{margin:var(--sp-4) 0;border-radius:var(--r-md);overflow:hidden;}
.tv-widget-large{min-height:480px;}
.tv-ticker-container{margin-bottom:var(--sp-4);}

/* ===== Final CTA ===== */
.final-cta{text-align:center;max-width:700px;margin:var(--sp-9) auto var(--sp-8);padding:var(--sp-8) var(--sp-5);background:linear-gradient(160deg,rgba(234,176,84,.12),rgba(155,127,224,.10));border:1px solid var(--line-strong);border-radius:var(--r-xl);}
.final-cta h2{margin:0 0 var(--sp-4);}
.btn-lg{padding:14px 34px;font-size:var(--fs-md);}

/* ===== Footer ===== */
.site-footer{position:relative;z-index:1;margin-top:var(--sp-9);border-top:1px solid var(--line);background:var(--bg-1);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6);padding:var(--sp-8) var(--sp-4) var(--sp-6);}
.footer-col h4{color:var(--ink-0);font-size:var(--fs-base);margin:0 0 var(--sp-3);}
.footer-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:var(--fs-sm);margin-bottom:10px;cursor:pointer;transition:color .2s ease;}
.footer-col a:hover{color:var(--brand);}
.footer-brand p{color:var(--ink-2);font-size:var(--fs-sm);margin:var(--sp-2) 0 var(--sp-3);}
.footer-bottom{border-top:1px solid var(--line);padding:var(--sp-4);text-align:center;color:var(--ink-2);font-size:var(--fs-xs);}

/* ===== Restrained one-time entrance for the hero (per design guidance: one orchestrated moment, not scattered fades) ===== */
@keyframes heroRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
#page-home .hero{animation:heroRise .7s cubic-bezier(.22,.9,.32,1) both;}
#page-home #boxGrid{animation:heroRise .7s cubic-bezier(.22,.9,.32,1) .12s both;}

@media (max-width:860px){
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid .why-card:last-child:nth-child(odd){grid-column:1/-1}
  .stats-bar{grid-template-columns:repeat(2,1fr);gap:var(--sp-5);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  #page-home .hero, #page-home #boxGrid{animation:none;}
}

/* ===== بخش F: اتاق معاملات — Lightweight Charts خودمان (نه ویجت TradingView) ===== */
.trading-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px;}
.trading-symbols{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:220px;}
.trading-symbols .chip{cursor:pointer;position:relative;}
.trading-symbols .chip.primary{outline:2px solid var(--accent);}
.trading-symbols .chip .sym-price{margin-inline-start:6px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;opacity:.85;}
.trading-timeframes{display:flex;gap:6px;}
.tf-btn{padding:6px 14px;border-radius:var(--r-full);font-size:.78rem;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:all .18s;}
.tf-btn:hover{color:var(--ink-0);border-color:var(--accent);}
.tf-btn.active{background:var(--accent);color:#0c1520;border-color:var(--accent);font-weight:600;}
.trading-status{font-size:.72rem;color:var(--ink-2);font-family:'IBM Plex Mono',monospace;}
.trading-status.live::before{content:"●";color:#26a69a;margin-inline-end:5px;animation:pulse-dot 1.5s infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.3;}}
.trading-chart-wrap{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:14px;}

/* بخش G3: بج نوتیفیکیشن کنار لینک «پشتیبانی» — تعداد تیکت‌های بازی که پاسخ ادمین دارند */
.notif-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger,#e5484d);color:#fff;font-size:.68rem;font-weight:700;vertical-align:middle;}

/* بخش H1: کارت‌های بزرگ دسته‌بندی دوره‌ها بالای گرید دوره‌ها */
.academy-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:28px;}
.academy-cat-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:22px 16px;text-align:center;cursor:pointer;transition:all .2s;}
.academy-cat-card:hover{border-color:var(--accent);transform:translateY(-3px);}
.academy-cat-card.active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--surface));}
.academy-cat-card .cat-icon{font-size:2rem;display:block;margin-bottom:8px;}
.academy-cat-card .cat-name{font-weight:600;font-size:.9rem;}
.academy-cat-card .cat-count{font-size:.72rem;color:var(--ink-2);margin-top:4px;}

/* بخش H2: پلیر تعاملی دوره — ویدیو/متن/فایل درس فعال + لیست کناری با چک‌باکس */
.lesson-player{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin:var(--sp-4) 0;}
@media (max-width:800px){ .lesson-player{grid-template-columns:1fr;} }
.lesson-player-main{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:18px;}
.lesson-player-main video{width:100%;border-radius:10px;background:#000;max-height:420px;}
.lesson-progress-bar{height:8px;border-radius:4px;background:var(--bg-2);overflow:hidden;margin-bottom:14px;}
.lesson-progress-fill{height:100%;background:var(--accent);transition:width .3s ease;}
.lesson-nav-row{display:flex;justify-content:space-between;gap:10px;margin-top:14px;}
.lesson-list{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;padding:10px;max-height:520px;overflow-y:auto;}
.lesson-list-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;cursor:pointer;transition:background .15s;}
.lesson-list-item:hover{background:var(--bg-2);}
.lesson-list-item.active{background:color-mix(in srgb, var(--accent) 12%, transparent);}
.lesson-list-item .lesson-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;font-size:.7rem;}
.lesson-list-item .lesson-check.done{background:var(--success,#26a65b);border-color:var(--success,#26a65b);color:#fff;}
.lesson-list-item .lesson-title{flex:1;font-size:.85rem;}
/* بخش C2: هر دو ردیف (ریلز بالا + پست‌های پایین) حالا کاروسل افقی کامل‌اند:
   فلش چپ/راست + درگ با ماوس + wheel + اسکرول لمسی طبیعی + scroll-snap +
   اسکرول‌بار نازک (هم وبکیت هم فایرفاکس). .ig-carousel-wrap فلش‌ها را نسبت
   به ردیفِ داخلش absolute موقعیت‌دهی می‌کند. */
.ig-carousel-wrap{position:relative;}
.ig-carousel-wrap .ig-reels-row,.ig-carousel-wrap .ig-grid,.ig-carousel-wrap .ig-home-grid{scrollbar-width:thin;scrollbar-color:var(--accent,#6c5ce7) transparent;cursor:grab;}
.ig-carousel-wrap .ig-reels-row.dragging,.ig-carousel-wrap .ig-grid.dragging,.ig-carousel-wrap .ig-home-grid.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.ig-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(20,20,30,.65);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.3);transition:background .2s ease,opacity .2s ease;opacity:.85;}
.ig-arrow:hover{background:rgba(20,20,30,.9);opacity:1;}
.ig-arrow-prev{right:-6px;}
.ig-arrow-next{left:-6px;}
@media (max-width:640px){ .ig-arrow{display:none;} } /* موبایل: اسکرول لمسی طبیعی جای فلش را می‌گیرد */

.ig-reels-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;margin-bottom:8px;}
.ig-reels-row::-webkit-scrollbar{height:6px;}
.ig-reels-row::-webkit-scrollbar-thumb{background:var(--accent,#6c5ce7);border-radius:6px;}
.ig-reel-item{flex:0 0 auto;width:280px;height:500px;border-radius:16px;overflow:hidden;position:relative;scroll-snap-align:start;background:var(--bg-2);cursor:pointer;box-shadow:var(--shadow-sm);}
.ig-reel-item video,.ig-reel-item img{width:100%;height:100%;object-fit:cover;display:block;}
.ig-reel-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 8px;border-radius:20px;display:flex;align-items:center;gap:4px;}
@media (max-width:640px){ .ig-reel-item{width:190px;height:340px;} }

/* بخش C2: ردیف پایین هم مثل ردیف بالا کاروسل افقی شد (قبلاً grid با wrap
   بود؛ حالا flex بدون wrap + اسکرول افقی، دقیقاً همان رفتار ردیف ریلز). */
.ig-grid{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;}
.ig-grid::-webkit-scrollbar{height:6px;}
.ig-grid::-webkit-scrollbar-thumb{background:var(--accent,#6c5ce7);border-radius:6px;}
.ig-cell{flex:0 0 auto;width:220px;position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:10px;cursor:pointer;background:var(--bg-2);scroll-snap-align:start;}
.ig-cell img,.ig-cell video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.ig-cell:hover img,.ig-cell:hover video{transform:scale(1.05);}
.ig-cell-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%);opacity:0;transition:opacity .25s ease;display:flex;align-items:flex-end;padding:10px;color:#fff;font-size:13px;}
.ig-cell:hover .ig-cell-overlay{opacity:1;}
.ig-cell-type-icon{position:absolute;top:8px;left:8px;color:#fff;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.6);}

/* بخش رفع باگ ۲: پلیس‌هولدر وقتی تصویر/ویدیوی اینستاگرام لود نشود (URL منقضی‌شده) */
.ig-broken-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--bg-2);color:var(--ink-2);font-size:.72rem;text-align:center;padding:10px;}
.ig-broken-placeholder i{font-size:1.4rem;opacity:.6;}
@media (max-width:640px){ .ig-cell{width:160px;} }

/* بخش C3: بلوک پیش‌نمایش اینستاگرام در صفحه‌ی اصلی — گرید ثابت (نه کاروسل)،
   هماهنگ با بقیه‌ی .grid-cards صفحه‌ی اصلی. */
/* رفع نواقص — بخش D+G: قبلاً grid با auto-fill بود (فقط چند ردیف wrap‌شونده،
   بدون امکان اسکرول افقی نامحدود) — الان دقیقاً مثل .ig-grid یک ردیف افقی
   قابل‌اسکرول است تا lazy-load افقی (enableCarousel) روی آن معنا داشته باشد. */
.ig-home-grid{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;}
.ig-home-grid::-webkit-scrollbar{height:6px;}
.ig-home-grid::-webkit-scrollbar-thumb{background:var(--accent,#6c5ce7);border-radius:6px;}
.ig-home-cell{scroll-snap-align:start;}
.ig-home-cell{border-radius:12px;}

.ig-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;}
.ig-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);}
.ig-modal-box{position:relative;z-index:1;background:var(--bg-1);border-radius:16px;max-width:920px;width:92vw;max-height:88vh;display:flex;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.ig-modal-media{flex:1 1 60%;background:#000;display:flex;align-items:center;justify-content:center;min-height:320px;}
.ig-modal-media img,.ig-modal-media video{max-width:100%;max-height:88vh;width:100%;height:100%;object-fit:contain;}
.ig-modal-info{flex:1 1 40%;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;}
.ig-modal-info p{color:var(--ink-2);line-height:1.9;white-space:pre-wrap;}
.ig-modal-close{position:absolute;top:10px;left:10px;z-index:2;background:rgba(0,0,0,.5);color:#fff;border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px;}
@media (max-width:720px){
  .ig-modal-box{flex-direction:column;max-height:92vh;}
  .ig-modal-media{min-height:220px;}
}