/* ============================================================
   سکوی داده بورس تهران — نسخه خلاقانه
   پایه: زبان طراحی تاییدشده (مشکی واقعی + فیروزه‌ای + کروم هولوگرافیک)
   همه گرافیک‌ها اورجینال و دست‌ساز.
   ============================================================ */

/* ── فونت: وزیرمتن (OFL) ── */
@font-face{ font-family:"Vazirmatn"; src:url("fonts/Vazirmatn-Regular.2.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Vazirmatn"; src:url("fonts/Vazirmatn-Medium.2.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Vazirmatn"; src:url("fonts/Vazirmatn-SemiBold.2.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Vazirmatn"; src:url("fonts/Vazirmatn-Bold.2.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Vazirmatn"; src:url("fonts/Vazirmatn-Black.2.woff2") format("woff2"); font-weight:900; font-display:swap; }

:root{
  /* ---- زمینه و سطح ----
     سه پله تیره: خود صفحه، سطح برجسته، سطح برجسته تر. */
  --bg:#0b1016; --surface:#121a23;
  /* سطح دکمه ها و نشان های خنثی (دکمه تیره، پیکان اسلایدر، نشان شبکه ها) */
  --surface-control:#1c2a35; --surface-control-hover:#273946;
  /* ته گرادیان بندانگشتی های تحلیل - هر چهار بندانگشتی به همین می رسند */
  --surface-deep:#0d141b;
  /* نوار تیکر. محو شدن دو سرش باید دقیقا همین رنگ باشد وگرنه لبه دیده
     می شود؛ دلیل توکن شدنش همین قید هم رنگی است، نه صرفه جویی. */
  --surface-ticker:#0e151c;

  /* ---- خط و حاشیه ----
     ضخامت جدا از رنگ است چون در هفده حاشیه تکرار می شود و همه یک
     تصمیم اند: خط مو. رنگ عوض می شود، ضخامت نه. */
  --hairline:1px;
  --line:#9fd8d416; --line-2:#b9d9dd28;

  /* ---- متن ---- */
  --txt:#f7fafc; --dim:#b1bec8; --mute:#8495a3;
  /* یک پله بالاتر از --txt: برچسب دکمه، پیوند زیر نشانگر، جوهر ورودی،
     متن انتخاب شده. سفید خالص عمدی است، نه گردکردن --txt. */
  --txt-bright:#fff;
  /* جوهر روی سطح فیروزه ای (دکمه اصلی، برگه فعال) */
  --on-mint:#06110e;

  /* ---- فیروزه برند ----
     کانال ها جدا تعریف شده اند چون همین رنگ هم به شکل جامد لازم می شود
     هم با شفافیت های گوناگون داخل rgba. پیش از این، فیروزه با سه نگارش
     متفاوت در بیش از بیست جای پرونده نوشته شده بود. */
  --mint-rgb:35,247,221;
  --mint:rgb(var(--mint-rgb));
  --mint-2:#81fbe9; --mint-black:#0a201d;
  /* فیروزه کم جان: خط موی تزیینی، نقطه شبکه، حاشیه برچسب */
  --mint-faint:#23f7dd3d;

  /* ---- طیف هولوگرافیک (امضای دیداری) ----
     همان پله هایی که در گرادیان مخروطی لوگو و قوس افق و حلقه ها پشت سر
     هم می آیند. فیروزه پله نخست همین طیف است. */
  --iris-violet:#8b7cf8; --iris-violet-soft:#a78bfa;
  --iris-pink:#f472b6; --iris-green:#42ffb0;

  /* ---- جهت بازار ---- */
  --up:#3bd990; --dn:#ff7182;
  --glow:#00ffe099;

  /* ---- هاله و سایه تکرارشونده ---- */
  --glow-dot:0 0 8px var(--mint);                       /* نقطه زنده و مردمک لوگو */
  --glow-gem:drop-shadow(0 0 4px #00e67666);            /* الماس های بخش موتور */
  --shadow-orb-inset:inset -16px -20px 44px #000000aa;  /* گودی داخلی کره ها */

  /* لبه شیشه ای کارت داشبورد. دو جا نوشته می شد (تعریف پایه و بازنویسی
     لایه حرکت)؛ یکی شدنشان تضمین می کند از هم دور نیفتند. */
  --edge-glass:linear-gradient(172deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 26%,
               rgba(var(--mint-rgb),.13) 70%, rgba(255,255,255,.05));

  /* ---- شعاع گوشه ----
     نام ها به کار عنصر اشاره می کنند نه به عدد، تا با عوض شدن مقدار
     نامشان دروغ نشود. */
  --radius-control:.75rem;   /* دکمه، ورودی */
  --radius-panel:1rem;       /* ترمینال، بندانگشتی، کارت تحلیل، قاب عکس */
  --radius-card:1.5rem;      /* کارت شیشه ای، قاب داشبورد */
  --radius-feature:2.5rem;   /* کارت بزرگ هوش مصنوعی، کاشی آمار */
  --radius-pill:99px;        /* برچسب و دسته اسکرول */

  /* ---- فاصله ----
     سه پله ای که واقعا تکرار می شوند. باقی فاصله ها یکتا هستند و همان جا
     نوشته شده اند. */
  --space-xs:.5rem;   /* بین نشانه و برچسبش */
  --space-sm:1rem;    /* شیار شبکه و پشته ها */
  --space-md:2rem;    /* شیار دو ستون بزرگ، درون کارت، حاشیه کناری صفحه */

  /* ---- زمان ----
     نام بر پایه حس حرکت است نه ثانیه. مدت انیمیشن های محیطی عمدا توکن
     نشده: دوره هایشان اعداد اول جداگانه اند تا با هم به اوج نرسند، و یک
     توکن مشترک دقیقا همان هم زمانی را برمی گرداند. */
  --motion-fast:.2s;    /* عوض شدن رنگ پیوندها */
  --motion-base:.3s;    /* بلند شدن کارت زیر نشانگر */
  --motion-glass:.45s;  /* دستگاه کارت شیشه ای: جابه جایی، سایه، نورافکن */
  --motion-slow:.6s;    /* هنر داخل کارت، نمایان شدن هنگام پیمایش */
  --motion-marquee:60s; /* دو نوار روان رو به رو - باید برابر بمانند */

  /* ---- منحنی شتاب ---- */
  --ease-glide:cubic-bezier(.165,.84,.44,1);  /* ترمز بلند و نرم */
  --ease-out-soft:cubic-bezier(.2,.8,.3,1);   /* بیرون آمدن ملایم */
  --ease-reveal:cubic-bezier(.22,.9,.3,1);    /* کشیده شدن چارت و میله ها */

  --container:80rem;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:calc(0.625rem + 0.41666vw); scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--txt);
  font-family:"Vazirmatn","Segoe UI",Tahoma,sans-serif; line-height:1.45; font-weight:500;
  overflow-x:hidden; position:relative;
}
/* دانه‌بندی فیلمی روی کل صفحه */
body::after{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity:.05; mix-blend-mode:overlay;
}
::selection{ background:#23f7dd33; color:var(--txt-bright); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2a2a2e; border-radius:var(--radius-pill); }
a{ text-decoration:none; color:inherit; }
img,svg{ max-width:100%; display:block; }
svg text{ font-family:"Vazirmatn","Segoe UI",Tahoma,sans-serif; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--space-md); }
.section{ padding:5.5rem 0; position:relative; }
.sp-16{height:1rem}.sp-24{height:1.5rem}.sp-32{height:2rem}.sp-40{height:2.5rem}
.sp-60{height:3.75rem}.sp-100{height:6.25rem}

/* ── تایپوگرافی ── */
.h-96{ font-size:6rem;    line-height:1.12; font-weight:900; }
.h-84{ font-size:5.25rem; line-height:1.15; font-weight:900; }
.h-64{ font-size:4rem;    line-height:1.18; font-weight:800; }
.h-40{ font-size:2.5rem;  line-height:1.25; font-weight:700; }
.h-26{ font-size:1.63rem; line-height:1.3;  font-weight:700; }
.h-20{ font-size:1.25rem; line-height:1.45; font-weight:600; }
.p-21{ font-size:1.31rem; line-height:1.78; font-weight:500; }
.p-16{ font-size:1rem;    line-height:1.72; font-weight:500; }
.p-14{ font-size:.88rem;  line-height:1.68; font-weight:500; }
.dim{ color:var(--dim); } .mute{ color:var(--mute); }
.p-21.mute{ color:var(--dim); }   /* پاراگراف‌های سرنویس یک پله روشن‌تر از پانوشت‌ها */
.center{ text-align:center; } .balance{ text-wrap:balance; }
.grad-word{
  background:linear-gradient(100deg,var(--mint),var(--iris-violet) 55%,var(--iris-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mint-word{ color:var(--mint); }

/* رنگِ کلِ یک عنوان، از پنل (cms4-home). فهرستِ محدود و معنادار — از همان
   متغیرهای برندِ بالا، نه انتخابگرِ رنگِ آزاد. .hd-c-grad دقیقا همان
   گرادیانِ .grad-word است، فقط برای کلِ عنوان به‌جای یک واژه. */
.hd-c-mint{ color:var(--mint); }
.hd-c-violet{ color:var(--iris-violet); }
.hd-c-pink{ color:var(--iris-pink); }
.hd-c-bright{ color:var(--txt-bright); }
.hd-c-grad{
  background:linear-gradient(100deg,var(--mint),var(--iris-violet) 55%,var(--iris-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:bx-shine 6s linear infinite;
}

/* ── دکمه‌ها ── */
.btn{
  display:inline-flex; justify-content:center; align-items:center; gap:.4rem;
  border-radius:var(--radius-control); font-weight:700; font-size:.9rem; line-height:1.5;
  padding:.7rem 1.15rem; cursor:pointer; border:none; font-family:inherit;
  transition:all .4s var(--ease-glide);
}
.btn:hover{ transform:translateY(-4px); }
.btn:active{ border-radius:.5rem; }
.btn-mint{ background:var(--mint); color:var(--on-mint); padding:.7rem 1.4rem; }
.btn-mint:hover{ background:var(--mint-2); box-shadow:0 0 14px 2px var(--glow); }
.btn-dark{ background:var(--surface-control); color:var(--txt-bright); }
.btn-dark:hover{ background:var(--surface-control-hover); }
.btn-ghost{ background:transparent; border:var(--hairline) solid var(--line-2); color:var(--txt-bright); }
.btn-ghost:hover{ border-color:#ffffff45; }

/* پیل نشان گرادیانی */
.pill-badge{
  display:inline-flex; align-items:center; gap:var(--space-xs);
  background:linear-gradient(var(--mint-black),var(--mint-black)) padding-box,
             linear-gradient(90deg,#00e67699,#23f7dd99) border-box;
  border:var(--hairline) solid transparent; border-radius:2rem;
  padding:.38rem 1rem; font-size:.88rem; font-weight:600;
}
.pill-badge .grad-text{
  background:linear-gradient(90deg,#00e676,var(--mint));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.live-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--mint);
  box-shadow:var(--glow-dot); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.45; } }

/* ── ناوبری ── */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:var(--space-md);
  background:rgba(10,10,12,.72); backdrop-filter:blur(16px);
  border-bottom:var(--hairline) solid var(--line);
  padding:.95rem 2.2rem;
}
.wordmark{ font-size:1.3rem; font-weight:900; display:flex; align-items:center; gap:.55rem; }
.wordmark i{ font-style:normal; color:var(--mint); }
.logo-eye{ width:1.9rem; height:1.9rem; border-radius:50%; position:relative; flex:none;
  background:conic-gradient(from 210deg,var(--mint),var(--iris-violet),var(--iris-pink),var(--iris-green),var(--mint)); }
.logo-eye::after{ content:""; position:absolute; inset:.22rem; border-radius:50%; background:#0a0a0c; }
.logo-eye::before{ content:""; position:absolute; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--mint); top:.42rem; right:.42rem; z-index:2; box-shadow:var(--glow-dot); }
.nav-links{ display:flex; gap:1.9rem; margin:0 auto; }
.nav-links a{ color:var(--dim); font-size:.94rem; font-weight:600; transition:color var(--motion-fast); }
.nav-links a:hover{ color:var(--txt-bright); }

/* ── تیکر زنده ── */
.ticker{ overflow:hidden; border-bottom:var(--hairline) solid var(--line); background:var(--surface-ticker);
  padding:.55rem 0; position:relative; }
.ticker::before,.ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:8rem; z-index:2; pointer-events:none;
}
.ticker::before{ right:0; background:linear-gradient(270deg,var(--surface-ticker),transparent); }
.ticker::after{ left:0; background:linear-gradient(90deg,var(--surface-ticker),transparent); }
.ticker-track{ display:flex; gap:2.6rem; width:max-content; animation:tick 46s linear infinite; }
@keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(50%);} }
.tk{ display:flex; align-items:center; gap:var(--space-xs); font-size:.85rem; white-space:nowrap; }
.tk b{ font-weight:600; color:#e5e5e5; }
.tk .up{ color:var(--up); } .tk .dn{ color:var(--dn); }
.tk .sep{ width:.28rem; height:.28rem; border-radius:50%; background:#333; }

/* ── هیرو ── */
.hero{ text-align:center; padding:6rem 0 0; position:relative; overflow:hidden; }
.hero-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% -12%, rgba(var(--mint-rgb),.16), transparent 70%),
    radial-gradient(26% 20% at 6% 12%,  rgba(139,124,248,.09), transparent 70%),
    radial-gradient(26% 20% at 94% 14%, rgba(244,114,182,.06), transparent 70%);
}
/* حلقه افق — طلوع کرومی که از پشت داشبورد سر می‌زند */
.horizon{
  position:absolute; left:50%; transform:translateX(-50%);
  width:110rem; height:110rem; top:18rem; border-radius:50%; z-index:0;
  background:conic-gradient(from 300deg,
    transparent, var(--mint) 8%, var(--iris-violet) 16%, var(--iris-pink) 22%, var(--iris-green) 30%, transparent 38%);
  -webkit-mask:radial-gradient(closest-side, transparent 64.4%, #000 64.9% 67.6%, transparent 68.2%);
          mask:radial-gradient(closest-side, transparent 64.4%, #000 64.9% 67.6%, transparent 68.2%);
  filter:saturate(1.25);
}
.horizon-glow{
  position:absolute; left:50%; transform:translateX(-50%); top:22rem; z-index:0;
  width:70rem; height:32rem; pointer-events:none;
  background:radial-gradient(50% 55% at 50% 0%, rgba(var(--mint-rgb),.22), transparent 70%);
}
.hero > .container{ position:relative; z-index:2; }
.hero h1{ max-width:62rem; margin:1.6rem auto 0; }
.hero .sub{ max-width:46rem; margin:1.6rem auto 0; }
.btn-row{ display:flex; gap:.8rem; justify-content:center; margin-top:2.2rem; flex-wrap:wrap; }

/* ── داشبورد شیشه‌ای شناور ── */
.shot-wrap{ perspective:1600px; margin-top:4.5rem; position:relative; z-index:2; }
.shot{
  max-width:66rem; margin:0 auto; text-align:right;
  border:var(--hairline) solid transparent;
  background:
    linear-gradient(rgba(17,18,20,.86), rgba(17,18,20,.86)) padding-box,
    var(--edge-glass) border-box;
  backdrop-filter:blur(14px); border-radius:var(--radius-card);
  transform:rotateX(9deg); transform-origin:50% 100%;
  box-shadow:0 60px 120px -30px #000000e6, 0 0 70px rgba(var(--mint-rgb),.07);
  overflow:hidden;
}
.shot-bar{ display:flex; align-items:center; gap:.55rem; padding:.85rem 1.2rem;
  border-bottom:var(--hairline) solid var(--line); }
.shot-bar .dot{ width:.62rem; height:.62rem; border-radius:50%; background:#2e2e33; }
.shot-bar .dot:first-child{ background:#3a3a40; }
.shot-bar .tab{ margin-inline-start:1rem; font-size:.78rem; color:var(--dim);
  background:#1d1d21; border-radius:.5rem; padding:.25rem .8rem; }
.shot-bar .tab.on{ color:var(--on-mint); background:var(--mint); font-weight:700; }
.shot-body{ display:grid; grid-template-columns:1fr 17rem; }
.shot-main{ padding:1.1rem 1.3rem 0; }
.shot-side{ border-inline-start:var(--hairline) solid var(--line); padding:1.1rem 1.2rem;
  display:flex; flex-direction:column; gap:var(--space-sm); }
.shot-side h6{ font-size:.78rem; color:var(--mute); font-weight:600; }
.mini-head{ display:flex; align-items:baseline; gap:.9rem; padding-bottom:.7rem; }
.mini-head b{ font-size:1.15rem; font-weight:800; }
.mini-head .px{ color:var(--mint); font-weight:700; direction:ltr; }
.mini-head .chg{ color:var(--up); font-size:.82rem; }

/* ── بنتو ── */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-sm); }

/* ══ سیستم کارت شیشه‌ای مشترک (card / explore / news) ══
   شیشه = پس‌زمینه نیمه‌شفاف + بلور + حاشیه گرادیانی با لبه بالایی روشن
   پویایی = هاور بالا-پر، نورافکن دنبال موس (--mx/--my از JS)، برق جاروکننده
   بهینه = فقط transform/opacity انیمیت می‌شود؛ یک تعریف برای هر سه نوع کارت */
.card,.explore-card,.news-card{
  position:relative; overflow:hidden; border:var(--hairline) solid transparent;
  background:
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 40%, rgba(18,19,22,.72)) padding-box,
    linear-gradient(168deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 28%, rgba(var(--mint-rgb),.10) 68%, rgba(255,255,255,.04)) border-box;
  backdrop-filter:blur(10px);
  transition:transform var(--motion-glass) var(--ease-glide), box-shadow var(--motion-glass);
}
.card:hover,.explore-card:hover,.news-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 52px -20px rgba(0,0,0,.85), 0 0 34px -8px rgba(var(--mint-rgb),.16);
}
/* نورافکن دنبال‌کننده موس */
.card::before,.explore-card::before,.news-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(22rem circle at var(--mx,50%) var(--my,-40%),
    rgba(var(--mint-rgb),.10), rgba(139,124,248,.06) 38%, transparent 62%);
  opacity:0; transition:opacity var(--motion-glass);
}
.card:hover::before,.explore-card:hover::before,.news-card:hover::before{ opacity:1; }
/* برق شیشه‌ای جاروکننده
   صفحه RTL است: نقطه شروع باید لبه راست (ابتدای خط) باشد نه چپ. با left:-45%
   بیرون‌زدگی سمت چپ در RTL قابل اسکرول حساب می‌شود و scrollWidth کارت را ۴۵٪
   بزرگ‌تر نشان می‌داد (روی موبایل ‎+۱۷۷ پیکسل)؛ با right لبه شروع بریده می‌شود.
   بیرون‌زدگی عمودی (‎top/bottom: -12%‎) هم به همین دلیل برداشته شد: overflow:hidden
   آن را می‌پوشاند ولی scrollHeight کارت را ۲۰ پیکسل بزرگ‌تر نگه می‌داشت. */
.card::after,.explore-card::after,.news-card::after{
  content:""; position:absolute; top:0; bottom:0; right:-45%; width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.06) 45%, rgba(129,251,233,.09) 55%, transparent);
  transform:skewX(-18deg); pointer-events:none; z-index:1;
  transition:transform .9s cubic-bezier(.19,1,.22,1);
}
.card:hover::after,.explore-card:hover::after,.news-card:hover::after{
  transform:translateX(-340%) skewX(-18deg);
}

.card{ border-radius:var(--radius-card); padding:var(--space-md);
  display:flex; flex-direction:column; min-height:0; }
.span-4{grid-column:span 4}.span-6{grid-column:span 6}
.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.card h3{ font-size:1.5rem; font-weight:800; }
.card .desc{ margin-top:.6rem; }
.card-top-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-sm); }
.art{ flex:1; min-height:10rem; margin-bottom:1.4rem; position:relative;
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--motion-slow) var(--ease-glide); }
.card:hover .art{ transform:translateY(-4px) scale(1.03); }
.art svg{ overflow:visible; }
.span-6 .art svg{ height:11.5rem; width:auto; }   /* در کارت‌های پهن، هنر بادکنکی نشود */
/* شناوری آرام عناصر کروی و حلقه‌ای */
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
.orb,.ai-art .ring{ animation:float 8s ease-in-out infinite; }
.ai-art .ring.ai-ring-b{ animation-duration:11s; animation-delay:1.2s; }

/* آمار */
.stat-card{ min-height:10.5rem; }
.stat-card .label{ font-size:1rem; color:var(--mute); font-weight:600; }
.stat-num{ color:var(--mint); font-size:3rem; line-height:1.15; font-weight:800;
  margin-top:auto; text-align:right; direction:rtl; }
.stat-num small{ font-size:1.35rem; color:var(--mute); font-weight:500; }

/* حلقه کرومی عمومی */
.ring{
  position:absolute; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 210deg,
    transparent, var(--mint) 18%, var(--iris-violet) 34%, transparent 48%,
    var(--iris-pink) 60%, var(--iris-green) 74%, transparent 88%, transparent);
  -webkit-mask:radial-gradient(closest-side, transparent 58%, #000 60% 84%, transparent 86%);
          mask:radial-gradient(closest-side, transparent 58%, #000 60% 84%, transparent 86%);
  filter:saturate(1.3) blur(.5px);
}

/* کره براق */
.orb{
  width:7rem; height:7rem; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #c8fff6, var(--mint) 26%, #0c6154 62%, #052420 100%);
  box-shadow:var(--shadow-orb-inset), 0 0 70px #23f7dd2e;
}
.orb.small{ width:5.2rem; height:5.2rem; }
.orb.violet{
  background:radial-gradient(circle at 32% 28%, #efe6ff, var(--iris-violet-soft) 28%, #3b2a80 64%, #120b2e 100%);
  box-shadow:var(--shadow-orb-inset), 0 0 70px #a78bfa2e;
}
.orb-ring{ position:absolute; width:10.5rem; height:3.4rem; border:2px solid #23f7dd44;
  border-radius:50%; }

/* شبکه نقطه‌ای */
.art-dots{ position:absolute; inset:1rem; border-radius:var(--radius-panel);
  background:radial-gradient(circle, var(--mint-faint) .17rem, transparent .2rem) 0 0/1.15rem 1.15rem; }
.art-dots.gray{ background:radial-gradient(circle, #73737348 .15rem, transparent .18rem) 0 0/1.3rem 1.3rem; }
.streak{ position:absolute; left:8%; bottom:18%; width:70%; height:.22rem; border-radius:1rem;
  background:linear-gradient(90deg, transparent, var(--mint));
  box-shadow:0 0 16px var(--mint); transform:rotate(-14deg); }
.hot-dot{ position:absolute; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--mint); box-shadow:0 0 12px var(--mint); }

/* ── سکشن هوش مصنوعی ── */
.ai-card{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); align-items:center;
  border-radius:var(--radius-feature); padding:3rem; min-height:24rem; }
.ai-art{ position:relative; min-height:19rem; display:flex; align-items:center; justify-content:center; }
.ai-ring-a{ width:17rem; height:17rem; right:14%; top:8%; opacity:1; }
.ai-ring-b{ width:10rem; height:10rem; left:2%; bottom:-3rem; opacity:.35; }
.ai-art .orb{ position:absolute; right:34%; top:44%; }
/* صحنه مرکزی کارت هشدار */
.center-stage{ position:relative; display:flex; align-items:center; justify-content:center; }
.center-stage .orb-ring{ left:50%; top:50%; transform:translate(-50%,-50%) rotate(-16deg); }
.ai-line{ display:flex; gap:.8rem; align-items:flex-start; padding:.8rem 0;
  border-bottom:var(--hairline) dashed #ffffff0f; }
.ai-line:last-child{ border-bottom:none; }
.ai-line time{ color:var(--mute); font-size:.8rem; min-width:2.6rem; padding-top:.2rem; }
.ai-line p{ font-size:.95rem; line-height:1.75; }
.ai-line p b{ color:var(--mint); font-weight:700; }
.tag{ font-size:.72rem; border-radius:var(--radius-pill); padding:.1rem .6rem; margin-inline-start:.4rem;
  vertical-align:.1rem; white-space:nowrap; }
.tag-ai{ color:#e9d5ff; border:var(--hairline) solid transparent;
  background:linear-gradient(#101013,#101013) padding-box,
             linear-gradient(100deg,#22d3ee,var(--iris-violet-soft),var(--iris-pink)) border-box; }
.tag-sig{ background:#23f7dd14; color:var(--mint); border:var(--hairline) solid var(--mint-faint); }

/* ── ترمینال موتور ── */
.engine-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); align-items:center; }
.term{
  background:#0b0c0d; border:var(--hairline) solid var(--line-2); border-radius:var(--radius-panel);
  padding:1.4rem 1.5rem; font-size:.92rem; line-height:2.1; text-align:right;
  box-shadow:0 30px 60px -20px #000c;
}
.term > div{ display:flex; align-items:baseline; gap:.6rem; }
.term .thead{ display:flex; gap:var(--space-xs); margin-bottom:.8rem; }
.term .thead span{ width:.6rem; height:.6rem; border-radius:50%; background:#26262b; }
.term .ok{ color:var(--mint); }
.term .t{ color:var(--dim); font-size:.82rem; margin-inline-start:auto; }
.term .warn{ color:#fdf5a3; }

/* ── سکشن بلورها ── */
.crystal-sec{ text-align:center; position:relative; overflow:hidden; padding:9rem 0; }
.crystal-sec .glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 40% at 50% 55%, rgba(0,230,118,.07), transparent 70%); }
/* فیلتر عمدا روی خود svg نیست بلکه روی چندضلعی های داخلش است.
   چرا: این عنصر حرکت می کند، و لایه فیلتردارِ متحرک هر فریم از نو رستر
   می شود — سنجیده شده ۳۱ فریم در برابر ۵۵. با این ترتیب، محتوای فیلتردار
   یک بار رستر می شود و بعد فقط جابه جا می شود. */
.crystal{ position:absolute; pointer-events:none; will-change:transform;
  /* svg محتوایش را به کادر خودش می برد. چون فیلتر حالا داخل svg است، بدون
     این خط درخشش سر کادر بریده می شود و یک مستطیل با لبه تیز دور الماس
     می افتد — دیده شد و زشت بود. */
  overflow:visible; }

/* ۴ و نه ۱۸: داخل svg واحد دیگر پیکسل صفحه نیست، واحد کاربری viewBox است
   (۶۰ در ۱۰۰). همان ۱۸ که روی خود عنصر درست بود، این جا چند برابر می شود و
   کل کادر را پر می کند. مزیت جانبی این که درخشش قالب خود الماس را می گیرد
   نه یک هاله گرد بی شکل را. */
.crystal polygon{ filter:var(--glow-gem); }
.c1{ top:4%; right:1.5%; width:6rem; }
.c2{ top:74%; right:42%; width:2.8rem; transform:rotate(-22deg);
     opacity:.75; }
.c3{ top:18%; left:6%; width:8.5rem; transform:rotate(-10deg); }
.c4{ bottom:10%; left:17%; width:3.6rem; transform:rotate(28deg); }
.crystal-sec .container{ position:relative; z-index:2; }
.crystal-sec .sub{ max-width:42rem; margin:1.5rem auto 0; }

/* ── کارت‌های کاوش ── */
.explore-head{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); align-items:end; margin-bottom:var(--space-md); }
.explore-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.explore-card{
  border-radius:var(--radius-card); padding:var(--space-md);
  min-height:17rem; display:flex; flex-direction:column;
}
.ghost-num{ position:absolute; top:.5rem; left:1rem; font-size:5.5rem; font-weight:900;
  color:#ffffff0a; line-height:1; direction:ltr; }
.explore-card .icx{ width:3.1rem; height:3.1rem; margin-bottom:1.1rem; }
.explore-card h3{ font-size:1.5rem; font-weight:700; }
.explore-card p{ margin-top:.5rem; }
.explore-card .go{ margin-top:auto; align-self:flex-start; color:var(--mint); font-size:1.3rem; }

/* ── سیاره ── */
.planet-sec{ text-align:center; position:relative; overflow:hidden; padding:11rem 0 7rem; }
.stars{ position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(circle, #ffffff26 .1rem, transparent .14rem) 0 0/3.3rem 2.6rem,
    radial-gradient(circle, #ffffff1c .08rem, transparent .12rem) 1.4rem 1.1rem/2.6rem 3.4rem; }
.planet{
  position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  width:27rem; height:27rem; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 36% 30%, #35e0ad, #147a5d 34%, #0a352b 66%, #05130f 96%);
  box-shadow:0 0 140px #00e67630, inset -26px -34px 90px #000000c9, inset 6px 8px 30px #b9ffe522;
}
.orbit{ position:absolute; left:50%; top:50%; width:39rem; height:12.5rem;
  border:var(--hairline) solid var(--mint-faint); border-radius:50%;
  transform:translate(-50%,-50%) rotate(-14deg); z-index:0; }
.orbit.o2{ width:46rem; height:15.5rem; transform:translate(-50%,-50%) rotate(-8deg); opacity:.5; }
.orbit .sat{ position:absolute; top:12%; right:18%; width:.6rem; height:.6rem; border-radius:50%;
  background:#fff; box-shadow:0 0 10px #fff; }
.planet-sec .content{ position:relative; z-index:2; }
.planet-sec .sub{ max-width:40rem; margin:1.5rem auto 0;
  color:#d9fff4; text-shadow:0 2px 22px rgba(4,17,13,.9); }

/* ── ماركی + نقل‌قول ── */
.marquee-wrap{ overflow:hidden; display:flex; flex-direction:column; gap:var(--space-sm); }
.marquee{ display:flex; gap:var(--space-sm); width:max-content; animation:m-left var(--motion-marquee) linear infinite; }
.marquee.rev{ animation:m-right var(--motion-marquee) linear infinite; }
@keyframes m-left { from{ transform:translateX(0);} to{ transform:translateX(50%);} }
@keyframes m-right{ from{ transform:translateX(50%);} to{ transform:translateX(0);} }
.ph-photo{ width:16rem; height:10rem; border-radius:var(--radius-panel); flex:none;
  border:var(--hairline) solid var(--line); position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 78% -10%, #23f7dd26, transparent 55%),
             linear-gradient(150deg,var(--surface-control),var(--surface) 60%); }
.ph-photo::after{ content:""; position:absolute; inset:0;
  background:conic-gradient(from 210deg at 20% 120%, transparent, #8b7cf824 30%, #f472b61c 45%, transparent 62%); }
.ph-photo.v2{ background:radial-gradient(120% 140% at 20% -10%, #23f7dd1c, transparent 55%),
              linear-gradient(150deg,#1e3a33,#121214 65%); }
.ph-photo.v2::before{ content:""; position:absolute; inset:.8rem; border-radius:.6rem;
  background:radial-gradient(circle, #23f7dd2e .14rem, transparent .17rem) 0 0/1.1rem 1.1rem; }
.ph-photo.v3{ background:radial-gradient(120% 140% at 80% 110%, #a78bfa21, transparent 55%),
              linear-gradient(150deg,#2b2340,#131315 65%); }
.ph-photo.v3::before{ content:""; position:absolute; left:10%; bottom:22%; width:65%; height:.2rem;
  border-radius:1rem; background:linear-gradient(90deg,transparent,var(--iris-violet-soft));
  box-shadow:0 0 14px #a78bfa66; transform:rotate(-14deg); }
.stat-tile{ width:16rem; height:10rem; border-radius:var(--radius-feature); flex:none; padding:1.5rem;
  display:flex; flex-direction:column; justify-content:flex-end; color:#141416; }
.stat-tile b{ font-size:2.8rem; line-height:1; font-weight:900; }
.stat-tile span{ font-size:1rem; margin-top:.4rem; }
.t-violet{ background:#be99f8; } .t-teal{ background:#a5fcf0; } .t-yellow{ background:#fdf5a3; }
.quote{ max-width:60rem; margin-top:4rem; }

/* ── کارت‌های تحلیل ── */
.news-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-sm); }
.news-card{ border-radius:var(--radius-panel); }
.news-card .thumb{ height:9rem; position:relative; overflow:hidden; }
.news-card .thumb::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(80% 90% at 25% 12%, #ffffff14, transparent 60%); }
.th-1{ background:radial-gradient(120% 130% at 80% 100%, #23f7dd55, #0d2a26 45%, var(--surface-deep) 90%); }
.th-2{ background:radial-gradient(120% 130% at 20% 100%, #a78bfa55, #221a3c 45%, var(--surface-deep) 90%); }
.th-3{ background:radial-gradient(120% 130% at 80% 0%,  #fdf5a344, #2c2a14 45%, var(--surface-deep) 90%); }
.th-4{ background:radial-gradient(120% 130% at 50% 120%, #f472b64d, #2c1420 45%, var(--surface-deep) 90%); }
.news-card .body{ padding:1.25rem; }
.meta-row{ display:flex; align-items:center; gap:var(--space-xs); font-size:.82rem; margin-bottom:.7rem; }
.meta-row .dot{ width:.3rem; height:.3rem; border-radius:50%; background:#3a3a40; }
.tag-tech{ color:#e4fea3; } .tag-eco{ color:#97e0ff; } .tag-use{ color:#8bfab4; }

/* ── اسلایدر ── */
.slider-head{ display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-md); }
.slider-head h2{ margin-inline-end:auto; }
.arrow-btn{ width:2.75rem; height:2.75rem; border-radius:50%;
  background:var(--surface-control); color:var(--txt-bright); border:none; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.arrow-btn:hover{ background:var(--surface-control-hover); }

/* ── خبرنامه ── */
.newsletter{ padding:6.5rem 0; position:relative; overflow:hidden; }
.newsletter .coil{ position:absolute; top:50%; transform:translateY(-50%); z-index:0; opacity:.8; }
.newsletter .coil.left{ left:3rem; }
.newsletter .box{ max-width:34rem; position:relative; z-index:2; }
.nl-row{ display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:1.75rem; }
/* wrap لازم شد وقتی فرم خبرنامه مرده جایش را به سه پیوند واقعی داد:
   سه دکمه در ۳۹۰ پیکسل در یک ردیف جا نمی‌شوند و بدنه صفحه را می‌ترکاندند. */
.nl-row input[type=email]{
  flex:1; background:var(--surface); border:var(--hairline) solid var(--line-2);
  border-radius:var(--radius-control); padding:.85rem 1.1rem; color:var(--txt-bright); font-family:inherit; font-size:.94rem;
}
.nl-row input[type=email]::placeholder{ color:var(--mute); }

/* ── فوتر ── */
footer{ border-top:var(--hairline) solid var(--line); padding:4.5rem 0 2rem; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:var(--space-md); position:relative; z-index:2; }
.f-col h5{ font-size:.88rem; color:#d4d4d4; margin-bottom:1rem; font-weight:700; }
.f-col a{ display:block; color:var(--mute); font-size:.88rem; padding:.32rem 0; transition:color var(--motion-fast); }
.f-col a:hover{ color:var(--dim); }
.socials{ display:flex; gap:.6rem; margin-top:1.25rem; }
.socials span{ width:2.2rem; height:2.2rem; border-radius:50%; background:var(--surface-control);
  display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--dim); }
.copyright{ text-align:center; color:var(--dim); margin-top:4rem; position:relative; z-index:2; }
.footer-ring{ width:34rem; height:34rem; left:50%; transform:translateX(-50%); bottom:-26rem; opacity:.8;
  -webkit-mask:radial-gradient(closest-side, transparent 76%, #000 78% 87%, transparent 89%);
          mask:radial-gradient(closest-side, transparent 76%, #000 78% 87%, transparent 89%); }

/* حرکت کمتر برای کاربرانی که ترجیح داده‌اند */
/* ═══ شناوری الماس های بخش موتور داده ═══
   تا امروز این چهار الماس ساکن بودند. حالا هر کدام دوره و دامنه و فاز خودش
   را دارد.

   چرا هر کدام کی فریم جدا دارد و یک کی فریم مشترک بس نیست: سه الماس زاویه
   پایه دارند (منفی ۲۲، منفی ۱۰، مثبت ۲۸ درجه). transform یک خاصیت واحد است،
   پس کی فریمی که فقط translateY بنویسد زاویه را پاک می کند و الماس صاف
   می ایستد. هر کی فریم زاویه پایه خودش را در هر مرحله تکرار می کند.

   دوره ها عمدا عدد اول اند (۱۱ و ۱۳ و ۱۷ و ۱۹ ثانیه): با دوره های مضرب،
   هر چند ثانیه همه با هم به اوج می رسند و چشم آن ضربان جمعی را می گیرد.
   با اعداد اول، الگو عملا تکرار نمی شود.

   فقط transform و opacity متحرک اند. filter و سایه دست نخورده می مانند —
   متحرک کردنشان یعنی رستر دوباره در هر فریم، همان چیزی که قوس افق را از
   ۶۰ فریم به ۲۵ رساند. */

@keyframes bx-gem1{                     /* بزرگ، بالا راست — آهسته و آرام */
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  50%    { transform:translate3d(-6px,-16px,0) rotate(3deg); }
}
@keyframes bx-gem2{                     /* ریز و محو، پایین وسط — تندتر و بازتر */
  0%,100%{ transform:translate3d(0,0,0) rotate(-22deg); }
  50%    { transform:translate3d(9px,-22px,0) rotate(-15deg); }
}
@keyframes bx-gem3{                     /* بزرگ ترین، چپ — کم دامنه ترین */
  0%,100%{ transform:translate3d(0,0,0) rotate(-10deg); }
  50%    { transform:translate3d(5px,-12px,0) rotate(-6deg); }
}
@keyframes bx-gem4{                     /* کوچک، پایین چپ — سرکش ترین */
  0%,100%{ transform:translate3d(0,0,0) rotate(28deg); }
  50%    { transform:translate3d(-8px,-19px,0) rotate(36deg); }
}

/* درخششی که روی وجه الماس می لغزد. روی opacity است نه روی رنگ یا فیلتر،
   چون opacity تنها خاصیتی است که کارت گرافیک بدون رستر دوباره عوض می کند.
   دوره اش با دوره شناوری هم خوان نیست تا برق زدن سر جای ثابتی نیفتد. */
@keyframes bx-gem-shine{
  0%,100%{ opacity:.55; }
  38%    { opacity:1; }
}

.c1{ animation:bx-gem1 11s ease-in-out infinite; }
.c2 polygon{ filter:blur(.4px) var(--glow-gem); }
.c2{ animation:bx-gem2 13s ease-in-out infinite .8s; }
.c3{ animation:bx-gem3 17s ease-in-out infinite 1.6s; }
.c4{ animation:bx-gem4 19s ease-in-out infinite .4s; }

/* نوک سفید الماس، همان مثلث کوچک بالای هر کدام، برق می زند.
   هر کدام با تاخیر متفاوت تا هم زمان نشوند. */
.crystal polygon:nth-child(3){ animation:bx-gem-shine 7s ease-in-out infinite; }
.c1 polygon:nth-child(3){ animation-delay:0s; }
.c3 polygon:nth-child(3){ animation-delay:2.4s; }

/* هاله پشت بخش هم آرام نفس می کشد تا زمینه مرده نباشد.
   دوره اش بلند است (۱۵ ثانیه) چون هاله بزرگ است و حرکت تند روی سطح بزرگ
   به چشم می زند. */
@keyframes bx-gem-glow{
  0%,100%{ opacity:.75; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.06); }
}
.crystal-sec .glow{ animation:bx-gem-glow 15s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ── واکنش‌گرایی پایه ── */
@media (max-width:900px){
  .span-4,.span-6,.span-8{ grid-column:span 12; }
  .explore-grid,.news-grid,.footer-grid{ grid-template-columns:1fr 1fr; }
  .explore-head,.ai-card,.engine-grid{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .h-96{ font-size:3.2rem; } .h-84{ font-size:3rem; } .h-64{ font-size:2.5rem; }
  .shot-body{ grid-template-columns:1fr; }
  .shot-side{ display:none; }
  .horizon,.horizon-glow{ display:none; }
}

/* ══════════════════════════════════════════════════════════════════
   لایه حرکت صفحه اصلی
   ══════════════════════════════════════════════════════════════════
   قاعده ای که کل این بخش رویش بسته شده: فقط transform و opacity و
   clip-path متحرک می شوند. این سه تا را مرورگر روی کارت گرافیک انجام
   می دهد و چیدمان صفحه را دوباره حساب نمی کند، پس هرچقدر هم حرکت
   اضافه شود سرعت بارگذاری و پیمایش دست نمی خورد. هیچ کتابخانه ای
   اضافه نشد؛ کل این لایه چند کیلوبایت CSS است.

   دام مهمی که رعایت شده: حالت اولیه هیچ عنصری «پنهان» گذاشته نشده.
   بلوک prefers-reduced-motion بالاتر همه انیمیشن ها را با !important
   خاموش می کند؛ اگر پنهان بودن حالت پایه بود، کاربری که حرکت را خاموش
   کرده صفحه ای خالی می دید. پس پنهان بودن فقط داخل from و 0% است.
   ────────────────────────────────────────────────────────────────── */

/* ── قوس افق پشت چارت ── */

/* قوس ساکن می ماند و نمی چرخد — این تصمیم با سنجش گرفته شد، نه با سلیقه.
   چرخاندنش صفحه را روی ۲۵ فریم می نشاند، چون عنصرش حدود ۱۷۶۰ در ۱۷۶۰ پیکسل
   است و هم ماسک دارد هم فیلتر: لایه ماسک دار و فیلتردار را کارت گرافیک فقط
   نمی چرخاند، هر فریم از نو رستر می کند. با ساکن کردنش صفحه ۶۰ فریم می شود،
   که حتی از حالت «قوس را کلا بردار» هم روان تر است.
   حرکت قوس از بین نمی رود: پرتو جاروی روی آن می چرخد و هاله اش نفس می کشد،
   و آن دو تا با هم چند فریم بیشتر خرج ندارند.
   filter برداشته شد چون نیم پیکسل بلور روی یک گرادیان نرم دیده نمی شود ولی
   لایه را از دست کارت گرافیک در می آورد. contain:paint به مرورگر می گوید
   بیرون این کادر چیزی برای کشیدن نیست. */
.horizon{ contain:paint; }

.horizon::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  /* سفید و روشن، نه نعنایی کم رنگ. پرتو باید روی بخش رنگیِ بالای قوس هم
     دیده شود؛ نعنایی روی قوس نعنایی گم می شود. mix-blend-mode: plus-lighter
     راه استانداردترش بود ولی سنجیده شد و گران درآمد (۳۵ فریم در برابر ۵۴). */
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,255,255,.50) 12deg, rgba(var(--mint-rgb),.34) 20deg, transparent 34deg, transparent 360deg);
  animation:bx-sweep 11s linear infinite;
  pointer-events:none;
}
@keyframes bx-sweep{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

/* هاله افق: نفس کشیدن آرام، تا قوس مرده به نظر نرسد */
@keyframes bx-breathe{
  0%,100%{ transform:translateX(-50%) scale(1);    opacity:.78; }
  50%    { transform:translateX(-50%) scale(1.09); opacity:1; }
}
.horizon-glow{ animation:bx-breathe 11s ease-in-out infinite; }

/* ── کارت فملی: شیشه ای و شناور ──
   شیشه واقعی یعنی پس زمینه پشتش دیده شود، پس آلفای لایه تیره کم شد و
   جایش backdrop-filter نشست. قوس متحرک پشت کارت از داخلش پیداست و
   همان چیزی است که کارت را زنده می کند. */
.shot{
  background:
    linear-gradient(rgba(17,18,20,.55), rgba(17,18,20,.62)) padding-box,
    var(--edge-glass) border-box;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  position:relative; overflow:hidden;
  animation:bx-drift 10s ease-in-out infinite;
  will-change:transform;
}
/* شناوری سه بعدی. .shot-wrap از قبل perspective دارد، پس چرخش کوچک
   روی محور X و Y عمق می دهد بی آنکه متن کج و ناخوانا شود. */
@keyframes bx-drift{
  0%,100%{ transform:translateY(0)      rotateX(0deg)    rotateY(0deg); }
  33%    { transform:translateY(-15px)  rotateX(1.6deg)  rotateY(-1.3deg); }
  66%    { transform:translateY(-4px)   rotateX(-.7deg)  rotateY(.8deg); }
}
/* برق شیشه: یک نوار نور که آرام از روی کارت رد می شود */
.shot::before{
  content:''; position:absolute; top:-40%; bottom:-40%; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.13) 45%, rgba(var(--mint-rgb),.05) 55%, transparent);
  transform:skewX(-14deg);
  animation:bx-sheen 7s ease-in-out infinite;
  pointer-events:none; z-index:1;
}
@keyframes bx-sheen{
  0%      { left:-45%; opacity:0; }
  12%     { opacity:1; }
  55%,100%{ left:115%;  opacity:0; }
}
.shot > *{ position:relative; z-index:2; }

/* ── چارت فملی ──
   شمع ها یکی یکی با تاخیر جدا متحرک نمی شوند: چهل و هشت عنصر یعنی
   چهل و هشت قاعده. جایش کل گروه با یک clip-path از چپ به راست باز
   می شود، که همان حس «دارد کشیده می شود» را با یک قاعده می دهد و
   جهتش هم درست است، چون قیمت به سمت راست بالا می رود. */
@keyframes bx-wipe{
  from{ clip-path:inset(0 100% 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}
.fchart > g{ animation:bx-wipe 1.7s var(--ease-reveal) both; }
.fchart > g:nth-of-type(2){ animation-duration:2.1s; animation-delay:.15s; }

/* ناحیه زیر قیمت: از پایین بالا می آید */
@keyframes bx-rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.fchart > path{ animation:bx-rise 1.4s ease-out both; transform-origin:bottom; }

/* خط چین سطح: راه رفتن آرام خط چین، نشانه اینکه سطح زنده است */
@keyframes bx-march{ to{ stroke-dashoffset:-44; } }
.fchart > line[stroke-dasharray]{ animation:bx-march 5s linear infinite; }

/* دایره آخرین معامله: تپش */
@keyframes bx-ping{
  0%  { transform:scale(.75); opacity:.85; }
  70% { transform:scale(1.5);  opacity:0; }
  100%{ transform:scale(1.5);  opacity:0; }
}
.fchart circle{ transform-origin:618px 68px; animation:bx-ping 2.6s ease-out infinite; }

/* برچسب قیمت: آخر از همه می نشیند، بعد از اینکه چارت کشیده شد */
@keyframes bx-pop{ from{ opacity:0; transform:scale(.86);} to{ opacity:1; transform:none;} }
.fchart rect[fill="#23f7dd"], .fchart text[fill="#06110e"]{
  transform-origin:591px 59px; animation:bx-pop .5s cubic-bezier(.2,1.4,.4,1) 1.5s both;
}

/* ── عمق سفارش و نقشه صنایع: باز شدن میله ها ── */
@keyframes bx-grow-x{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.shot-side svg rect{ animation:bx-grow-x .8s var(--ease-reveal) both; }
.shot-side svg rect:nth-of-type(2){ animation-delay:.06s; }
.shot-side svg rect:nth-of-type(3){ animation-delay:.12s; }
.shot-side svg rect:nth-of-type(4){ animation-delay:.18s; }
.shot-side svg rect:nth-of-type(5){ animation-delay:.24s; }
.shot-side svg rect:nth-of-type(6){ animation-delay:.30s; }
.shot-side svg rect:nth-of-type(7){ animation-delay:.36s; }
.shot-side svg rect:nth-of-type(8){ animation-delay:.42s; }

/* ── کارت ها: بلند شدن زیر نشانگر ──
   فقط transform و سایه؛ هیچ عرض و ارتفاعی عوض نمی شود پس چیدمان
   دوباره حساب نمی شود. */
.card, .stat-card{
  transition:transform var(--motion-base) var(--ease-out-soft), box-shadow var(--motion-base) ease, border-color var(--motion-base) ease;
}
.card:hover, .stat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 40px -18px rgba(var(--mint-rgb),.35);
  border-color:rgba(var(--mint-rgb),.28);
}

/* ── نمایان شدن هنگام پیمایش ──
   حالت پنهان فقط وقتی گذاشته می شود که جاوااسکریپت کلاس bx-in را
   بگذارد، و آن هم فقط اگر کاربر حرکت را خاموش نکرده باشد. پس بدون
   جاوااسکریپت یا با حرکت خاموش، همه چیز از اول دیده می شود. */
.bx-in{ opacity:0; transform:translateY(18px); }
.bx-in.bx-on{ opacity:1; transform:none; transition:opacity var(--motion-slow) ease, transform var(--motion-slow) var(--ease-out-soft); }

/* ── حرکت های افزوده ──────────────────────────────────────────────
   همان قاعده بالا: فقط transform و opacity، بدون هیچ جاوااسکریپتی.

   آشکار شدن با پیمایش بدون جاوااسکریپت: animation-timeline:view() کار
   را به خود مرورگر می سپارد، پس نه IntersectionObserver لازم است نه
   شنونده scroll. مرورگری که پشتیبانی نکند اصلا وارد بلوک @supports
   نمی شود و بخش ها عادی و دیدنی می مانند — یعنی افت بی صدا ندارد. */
@supports (animation-timeline:view()){
  @keyframes bx-enter{
    from{ opacity:0; transform:translateY(26px); }
    to  { opacity:1; transform:none; }
  }
  .section > .container > *{
    animation:bx-enter linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 26%;
  }
}

/* درخشش روی واژه های گرادیانی: نور آرام از رویشان رد می شود.
   background-position متحرک است نه چیدمان، پس بازچینش ندارد. */
@keyframes bx-shine{ to{ background-position:200% center; } }
.grad-text,.grad-word{
  background-size:200% auto;
  animation:bx-shine 6s linear infinite;
}

/* نشان زنده: حلقه ای که از دور نقطه بیرون می زند، مثل تپش رادار.
   pulse خود نقطه سرجایش می ماند؛ این یکی حلقه بیرونی است. */
.pill-badge{ position:relative; }
.live-dot{ position:relative; }
.live-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:var(--hairline) solid var(--mint);
  animation:bx-ping 2.6s ease-out infinite;
  pointer-events:none;
}

/* دکمه اصلی: هاله روی pseudo-element جدا ساخته می شود تا خود دکمه فقط
   transformِ hover را داشته باشد. حلقه فقط transform و opacity را animate
   می کند؛ box-shadow دیگر در هیچ فریم CTA بازنقاشی نمی شود. */
@keyframes bx-cta{
  0%,100%{ transform:scale(1); opacity:.34; }
  60%    { transform:scale(1.16); opacity:0; }
}
.btn-mint{ position:relative; }
.btn-mint::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  border:var(--hairline) solid rgba(var(--mint-rgb),.72);
  transform:scale(1); opacity:.34; pointer-events:none;
  animation:bx-cta 3.4s ease-out infinite;
}
.btn-mint:hover::after{ animation-play-state:paused; }

/* ===== موبایل/لمس — کف هدف لمس (سنجش m1-mobile، ۱۴۰۵/۰۶/۰۹ خ) ===== */
@media (pointer: coarse){
  .nav .wordmark{ display:inline-flex; align-items:center; min-height:24px; }
  .footer-grid .f-col a{ padding-block:.48rem; }
  .footer-grid .f-col a.wordmark{ display:inline-flex; align-items:center; min-height:24px; }
}


/* ===== v44 — dual-theme comfort layer =====
   صفحه اصلی حالا همان ترجیح تم برنامه را می‌خواند. تم روشن صرفا وارونگی
   رنگ نیست: سطح سفید گرم، خط آبی-خاکستری و لهجه سبز تیره دارد تا متن و
   کارت‌ها در استفاده طولانی آرام‌تر باشند. */
:root[data-theme="light"]{
  --bg:#f3f7fa; --surface:#ffffff;
  --surface-control:#e7f0f4; --surface-control-hover:#dce8ee;
  --surface-deep:#e8f0f4; --surface-ticker:#eef5f7;
  --line:#17334514; --line-2:#17334528;
  --txt:#10212d; --dim:#526877; --mute:#718491; --txt-bright:#10212d;
  --on-mint:#ffffff;
  --mint-rgb:7,143,121; --mint:rgb(var(--mint-rgb)); --mint-2:#087965;
  --mint-black:#d9f7f1; --mint-faint:#078f793d;
  --iris-violet:#6655d8; --iris-violet-soft:#7869df; --iris-pink:#c95691; --iris-green:#0f9d74;
  --up:#07894d; --dn:#cc3d52; --glow:#078f7966;
  --edge-glass:linear-gradient(172deg,rgba(255,255,255,.96),rgba(16,33,45,.08) 28%,rgba(var(--mint-rgb),.18) 70%,rgba(16,33,45,.05));
  color-scheme:light;
}
:root:not([data-theme="light"]){color-scheme:dark}

/* کنترل تم صفحه اصلی */
.home-theme-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.7rem;height:2.7rem;
  border-radius:50%;border:var(--hairline) solid var(--line-2);background:var(--surface-control);
  color:var(--txt);font-family:inherit;font-size:1rem;font-weight:800;cursor:pointer;
  transition:transform var(--motion-fast),background var(--motion-fast),border-color var(--motion-fast);
}
.home-theme-btn:hover{transform:translateY(-2px);background:var(--surface-control-hover);border-color:rgba(var(--mint-rgb),.34)}
.home-theme-btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* سطح‌ها و شیشه‌ها در دو تم */
.nav{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.logo-eye::after{background:var(--bg)}
.card,.explore-card,.news-card{
  background:
    linear-gradient(160deg,color-mix(in srgb,var(--txt-bright) 5%,transparent),transparent 40%,color-mix(in srgb,var(--surface) 86%,transparent)) padding-box,
    linear-gradient(168deg,color-mix(in srgb,var(--txt-bright) 18%,transparent),var(--line) 28%,rgba(var(--mint-rgb),.13) 68%,var(--line)) border-box;
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .explore-card,
:root[data-theme="light"] .news-card{
  box-shadow:0 18px 48px -34px rgba(32,65,86,.34);
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .explore-card:hover,
:root[data-theme="light"] .news-card:hover{
  box-shadow:0 22px 52px -34px rgba(32,65,86,.38),0 0 32px -16px rgba(var(--mint-rgb),.24);
}
:root[data-theme="light"] .shot{
  background:linear-gradient(rgba(255,255,255,.82),rgba(247,251,253,.9)) padding-box,var(--edge-glass) border-box;
  box-shadow:0 44px 100px -48px rgba(35,67,88,.42),0 0 58px rgba(var(--mint-rgb),.06);
}
:root[data-theme="light"] .shot-bar .dot{background:#cfdae1}
:root[data-theme="light"] .shot-bar .tab{background:#e8f0f4;color:var(--dim)}
:root[data-theme="light"] .ticker::before{background:linear-gradient(270deg,var(--surface-ticker),transparent)}
:root[data-theme="light"] .ticker::after{background:linear-gradient(90deg,var(--surface-ticker),transparent)}
:root[data-theme="light"] body::after{opacity:.018;mix-blend-mode:multiply}
:root[data-theme="light"] .hero-glow{
  background:radial-gradient(60% 42% at 50% -12%,rgba(var(--mint-rgb),.12),transparent 70%),radial-gradient(26% 20% at 6% 12%,rgba(102,85,216,.07),transparent 70%),radial-gradient(26% 20% at 94% 14%,rgba(201,86,145,.05),transparent 70%);
}
:root[data-theme="light"] .planet-sec,
:root[data-theme="light"] .crystal-sec{background:linear-gradient(180deg,#eef6f8,#f6fafc)}
:root[data-theme="light"] footer{background:#edf4f7}

/* فونت کمی قوی‌تر، بدون سنگین کردن متن بلند */
.wordmark,.h-96,.h-84,.h-64{letter-spacing:-.02em}
.f-col h5,.voice-name,.ai-line .wt{font-weight:800}

@media (max-width:900px){
  .nav{padding:.7rem .8rem;gap:.55rem}
  .wordmark{font-size:1.08rem;margin-inline-end:auto}
  .nav>.btn{padding:.62rem .85rem;font-size:.8rem;min-height:44px}
  .home-theme-btn{width:44px;height:44px}
  .hero{padding-top:4.4rem}
  .container{padding-inline:1rem}
  .section{padding:4rem 0}
  .shot-wrap{margin-top:3rem}
  .card{padding:1.35rem}
}
@media (max-width:430px){
  .nav>.btn{font-size:0;width:44px;padding:0}
  .nav>.btn::after{content:'←';font-size:1.1rem}
  .h-96{font-size:2.85rem}
  .h-84{font-size:2.6rem}
  .p-21{font-size:1.05rem}
}

/* v45 — گزارش هوشمند بازار + رویدادهای سایت. دو بخش مستقیم از سند محصول:
   گزارش روزانه باید در خانه دیده شود و اعلان/امکان/تخفیف/میتینگ هم خانهٔ
   مشخص داشته باشد. هیچ رنگ تازه‌ای بیرون از توکن‌های تم تعریف نشده است. */
.home-marketbrief{padding-top:2.5rem;padding-bottom:2.5rem}
.market-brief-card{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(14rem,.55fr);gap:2rem;align-items:center;
  overflow:hidden;position:relative}
.market-brief-copy{position:relative;z-index:2}
.market-facts{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.15rem}
.market-facts span{display:inline-flex;align-items:center;min-height:2rem;padding:.35rem .7rem;border:var(--hairline) solid var(--line-2);
  border-radius:999px;background:var(--surface-control);color:var(--dim);font-size:.78rem;font-weight:700}
.market-brief-orb{position:relative;min-height:15rem;display:grid;place-items:center;isolation:isolate}
.market-brief-orb::before{content:'';position:absolute;width:9rem;height:9rem;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--txt-bright) 72%,transparent),rgba(var(--mint-rgb),.4) 18%,rgba(var(--mint-rgb),.06) 55%,transparent 72%);
  box-shadow:0 0 80px rgba(var(--mint-rgb),.2)}
.market-brief-orb span{position:absolute;border:1px solid color-mix(in srgb,var(--mint) 35%,var(--line));border-radius:50%}
.market-brief-orb span:nth-child(1){width:12rem;height:12rem}.market-brief-orb span:nth-child(2){width:15rem;height:15rem;opacity:.55}.market-brief-orb span:nth-child(3){width:18rem;height:18rem;opacity:.28}
.home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem}
.home-event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}
.home-event{display:block;padding:1.2rem 1.25rem;border:var(--hairline) solid var(--line);border-radius:var(--radius-card);
  background:var(--surface);transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}
.home-event:hover{transform:translateY(-3px);border-color:rgba(var(--mint-rgb),.34);background:var(--surface-control)}
.home-event-meta{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.65rem;color:var(--mute);font-size:.74rem}
.home-event-meta i{font-style:normal;font-weight:800;color:var(--mint)}
.home-event h3{font-size:1.05rem;font-weight:900;margin:0 0 .45rem}.home-event p{margin:0;color:var(--dim);font-size:.86rem;line-height:1.9}
.home-event-empty{text-align:center;color:var(--dim);font-weight:700;padding:1.15rem}
@media(max-width:760px){
  .market-brief-card{grid-template-columns:1fr;gap:.6rem}.market-brief-orb{min-height:8rem;order:-1}.market-brief-orb::before{width:6rem;height:6rem}
  .market-brief-orb span:nth-child(1){width:7.5rem;height:7.5rem}.market-brief-orb span:nth-child(2){width:9.5rem;height:9.5rem}.market-brief-orb span:nth-child(3){width:11.5rem;height:11.5rem}
  .home-section-head{align-items:flex-start;flex-direction:column}.home-event-grid{grid-template-columns:1fr}
  .market-facts{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.market-facts::-webkit-scrollbar{display:none}.market-facts span{flex:0 0 auto}
}