/* =========================================================
   Nabeghe AI — hub landing page (one bundled subscription,
   five purpose-built tools). Uses the site's own tokens
   (--ruby/--gold/--text/--surface/... from style.css) so it
   stays visually consistent, with its own premium hero treatment.
   ========================================================= */

/* =========================================================
   /nabeghe-ai — بازطراحیِ کامل به سبکِ «داکیومنت» (۱۴۰۵/۰۷/۰۹): ساده،
   بدونِ هیرویِ تیره/مش/گلو و بدونِ کارتِ قیمتِ پرزرق‌وبرق — یک صفحه‌ی
   راهنما/توضیحیِ تمیز که هم برایِ فهمِ کاربر هم برایِ سئو مناسب باشد.
   کلاس‌های قدیمیِ .naih-* پایین‌تر عمداً دست‌نخورده ماندند (فقط توسطِ
   templates/nabeghe_ai_combo.html استفاده می‌شدند که خودش دیگر هیچ‌جا
   رندر نمی‌شود — routes/main.py::nabeghe_ai_combo همیشه ریدایرکت می‌کند)
   — حذفشان لازم نبود، فقط دیگر توسطِ این صفحه استفاده نمی‌شوند. */
.naidoc{ max-width:880px; }
.naidoc-lead{ font-size:0.98rem; line-height:2; max-width:70ch; }
.naidoc-grad{
  background: linear-gradient(90deg, var(--ruby), var(--gold-deep)); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.section-head .eyebrow svg{ width:14px; height:14px; vertical-align:-2px; margin-inline-end:2px; }

/* یک پنلِ سراسریِ واحد که همه‌چیز — آمار، فهرست، بخش‌ها، کارت‌ها، قیمت‌ها،
   سؤالات — داخلش می‌شینه؛ به‌جایِ چند جعبه‌ی سفیدِ پراکنده روی پس‌زمینه‌ی
   صفحه (که به‌قولِ کاربر «جدا جدا» به‌نظر می‌رسید)، یک ورقه‌ی پیوسته با
   جداکننده‌های نازکِ داخلی — ۱۴۰۵/۰۷/۰۹. */
.naidoc-panel{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 34px 40px;
}

/* یک نگاهِ سریع به اعداد */
.naidoc-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); margin:26px 0 4px;
  border:1px solid var(--border-soft); border-radius: var(--radius-md); overflow:hidden;
}
.naidoc-stat{ text-align:center; padding:16px 8px; border-inline-start:1px solid var(--border-soft); }
.naidoc-stat:first-child{ border-inline-start:none; }
.naidoc-stat-num{
  display:block; font-family: var(--font-mono); font-size:1.5rem; font-weight:900; color: var(--ruby-deep); line-height:1.2;
}
.naidoc-stat-label{ display:block; font-size:0.7rem; color: var(--text-muted); font-weight:700; margin-top:4px; }

.naidoc-toc{
  display:flex; flex-wrap:wrap; gap:6px 8px; margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--border-soft);
}
.naidoc-toc a{
  display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:700; color: var(--ruby-deep);
  text-decoration:none; padding:5px 12px; border-radius: var(--radius-pill); background: var(--surface-2);
  transition: background .15s ease;
}
.naidoc-toc a:hover{ background: rgba(200,18,67,0.09); }
.naidoc-toc-dot{ width:6px; height:6px; border-radius:50%; background: var(--gold-deep); flex-shrink:0; }

.naidoc-section{ padding:32px 0; border-top:1px solid var(--border-soft); scroll-margin-top:90px; }
.naidoc-section h2{
  display:flex; align-items:center; gap:12px; font-size:1.28rem; font-weight:900; margin:0 0 16px;
}
.naidoc-h2-num{
  font-family: var(--font-mono); font-size:0.76rem; font-weight:800; color: var(--gold-deep);
  background: rgba(240,180,41,0.14); border:1px solid rgba(240,180,41,0.3);
  padding:3px 10px; border-radius: var(--radius-pill); flex-shrink:0;
}
.naidoc-section > p{ font-size:0.92rem; line-height:2; color: var(--text-muted); margin:0 0 14px; }
.naidoc-section > p b{ color: var(--text); }

/* کارت‌هایِ استودیو/دستیار — حالا ردیفِ ساده با جداکننده، نه جعبه‌ی سفیدِ
   جدا (همه‌چیز روی همان پس‌زمینه‌ی یک‌دستِ پنل می‌نشیند). */
.naidoc-grid{ display:flex; flex-direction:column; margin-top:16px; border-top:1px solid var(--border-soft); }
.naidoc-card{
  position:relative; display:flex; gap:16px; align-items:flex-start;
  padding:18px 6px; text-decoration:none; color:inherit; border-bottom:1px solid var(--border-soft);
  border-inline-start: 3px solid transparent; transition: border-color .18s ease, background .18s ease, padding-inline-start .18s ease;
}
.naidoc-card:hover{
  border-inline-start-color: var(--nai-accent, var(--ruby));
  background: color-mix(in srgb, var(--nai-accent, var(--ruby)) 5%, transparent);
  padding-inline-start:14px;
}
.naidoc-card-ico{
  flex-shrink:0; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--nai-accent, var(--ruby));
  background: color-mix(in srgb, var(--nai-accent, var(--ruby)) 14%, transparent);
}
.naidoc-card-ico svg{ width:22px; height:22px; }
.naidoc-card-body{ min-width:0; flex:1; }
.naidoc-card-body h3{ margin:0 0 4px; font-size:1.02rem; font-weight:800; color: var(--text); }
.naidoc-card-body p{ margin:0 0 8px; color: var(--text-muted); font-size:0.85rem; line-height:1.85; }
.naidoc-modes{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.naidoc-mode-chip{
  display:inline-flex; align-items:center; padding:3px 11px; border-radius: var(--radius-pill);
  font-size:0.7rem; font-weight:800; color: var(--nai-accent, var(--ruby));
  background: color-mix(in srgb, var(--nai-accent, var(--ruby)) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--nai-accent, var(--ruby)) 28%, transparent);
}
.naidoc-card-cta{ font-size:0.82rem; font-weight:800; color: var(--nai-accent, var(--ruby)); display:inline-flex; align-items:center; gap:4px; }
.naidoc-arrow{ transition: transform .18s ease; }
.naidoc-card:hover .naidoc-arrow{ transform: translateX(-4px); }

/* لیستِ ساده‌ی قیمت‌ها — به‌جایِ <table> (که در موبایل، به‌خاطرِ یک باگِ
   شناخته‌نشده‌ی الگوریتمِ table-layout با محتوایِ ترکیبیِ RTL/مونو، پهن‌تر از
   عرضِ صفحه می‌شد و ستونِ قیمت را کاملاً از دیدِ کاربر بیرون می‌برد)
   ردیف‌هایِ ساده‌ی flex همیشه درست جمع می‌شوند — ۱۴۰۵/۰۷/۰۹. */
.naidoc-price-list{ border-top:1px solid var(--border-soft); margin-bottom:14px; }
.naidoc-price-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:13px 6px; border-bottom:1px solid var(--border-soft); font-size:0.88rem;
}
.naidoc-price-row.is-best{ background: rgba(240,180,41,0.08); font-weight:800; }
.naidoc-price-amount{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.naidoc-best-badge{
  font-size:0.64rem; font-weight:800; color:#2b1400; background: linear-gradient(120deg, var(--gold), #d99a1a);
  padding:2px 8px; border-radius:999px; margin-inline-start:6px;
}
.naidoc-permo{ font-size:0.76rem; }

.naidoc-faq{ border-top:1px solid var(--border-soft); }
.naidoc-faq details{ padding:14px 6px; border-bottom:1px solid var(--border-soft); }
.naidoc-faq summary{
  cursor:pointer; font-weight:800; font-size:0.9rem; color: var(--text); list-style:none;
  display:flex; align-items:center; gap:12px;
}
.naidoc-faq summary::-webkit-details-marker{ display:none; }
.naidoc-faq-q{
  flex-shrink:0; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:800; font-size:0.82rem; color: var(--ruby);
  background: rgba(200,18,67,0.1);
}
.naidoc-faq summary > span:not(.naidoc-faq-q){ flex:1; }
.naidoc-faq summary::after{ content:'+'; font-size:1.2rem; color: var(--ruby); flex-shrink:0; transition: transform .18s ease; }
.naidoc-faq details[open] summary::after{ transform: rotate(45deg); }
.naidoc-faq details p{ margin:10px 0 0 36px; color: var(--text-muted); font-size:0.84rem; line-height:1.85; }

/* ── جمع‌وجورشدنِ چشمگیر در موبایل — طبقِ خواستِ صریحِ کاربر (۱۴۰۵/۰۷/۰۹) ── */
@media (max-width:700px){
  .naidoc-panel{ padding:20px 16px; border-radius: var(--radius-md); }
  .naidoc-lead{ font-size:0.85rem; line-height:1.85; }
  .naidoc-stats{ grid-template-columns: repeat(4, 1fr); margin-top:16px; }
  .naidoc-stat{ padding:10px 2px; }
  .naidoc-stat-num{ font-size:1.05rem; }
  .naidoc-stat-label{ font-size:0.58rem; margin-top:2px; }
  .naidoc-toc{ margin-top:16px; padding-top:14px; gap:6px; }
  .naidoc-toc a{ font-size:0.72rem; padding:4px 9px; }
  .naidoc-section{ padding:20px 0; }
  .naidoc-section h2{ font-size:1.05rem; gap:8px; margin-bottom:10px; }
  .naidoc-h2-num{ font-size:0.68rem; padding:2px 8px; }
  .naidoc-section > p{ font-size:0.82rem; line-height:1.85; }
  .naidoc-grid{ margin-top:10px; }
  .naidoc-card{ padding:13px 4px; gap:10px; }
  .naidoc-card:hover{ padding-inline-start:10px; }
  .naidoc-card-ico{ width:38px; height:38px; }
  .naidoc-card-ico svg{ width:18px; height:18px; }
  .naidoc-card-body h3{ font-size:0.9rem; }
  .naidoc-card-body p{ font-size:0.76rem; margin-bottom:6px; }
  .naidoc-mode-chip{ font-size:0.62rem; padding:2px 8px; }
  .naidoc-card-cta{ font-size:0.74rem; }
  .naidoc-price-row{ padding:10px 4px; font-size:0.78rem; }
  .naidoc-permo{ font-size:0.68rem; }
  .naidoc-faq details{ padding:11px 4px; }
  .naidoc-faq summary{ font-size:0.82rem; gap:8px; }
  .naidoc-faq-q{ width:20px; height:20px; font-size:0.72rem; }
  .naidoc-faq details p{ font-size:0.76rem; margin-inline-start:0; margin-top:8px; }
}

/* =========================================================
   /nabeghe-ai hub page — dark premium hero (same visual language as the
   homepage teaser: ink background, constellation mesh, gradient border,
   glow/ring/dot decorations) + a proper tool grid + pricing panel.
   (قدیمی — دیگر توسطِ خودِ صفحه‌ی هاب استفاده نمی‌شود، طبقِ یادداشتِ بالا.)
   ========================================================= */

.naih-hero-outer{
  position:relative; z-index:1; border-radius: var(--radius-lg); padding:1.5px; overflow:hidden;
  background: linear-gradient(120deg, var(--ruby-light), var(--gold), var(--ruby));
  box-shadow: var(--shadow-pop);
}
.naih-hero-wrap{ position:relative; max-width:920px; margin:0 auto; padding:22px 10px; }
.naih-deco{ position:absolute; pointer-events:none; z-index:0; }
.naih-deco-glow{
  inset:-15% -8%; border-radius:40%;
  background: radial-gradient(closest-side, rgba(200,18,67,0.16), transparent 70%),
              radial-gradient(closest-side, rgba(240,180,41,0.12), transparent 75%);
  filter: blur(34px); animation: nai-glow-pulse 7s ease-in-out infinite;
}
.naih-deco-ring{
  width:150px; height:150px; top:-30px; left:-24px; border-radius:50%;
  border:1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  animation: nai-spin 26s linear infinite;
}
.naih-deco-dot{ border-radius:50%; animation: nai-float 4s ease-in-out infinite; }
.naih-deco-dot.d1{ width:11px; height:11px; top:14px; right:10%; background: var(--gold); box-shadow:0 0 14px 2px rgba(240,180,41,0.6); }
.naih-deco-dot.d2{ width:16px; height:16px; bottom:26px; left:2%; background: var(--ruby-light); box-shadow:0 0 16px 2px rgba(255,67,104,0.55); animation-delay:1.2s; }

.naih-hero{
  position:relative; z-index:1; overflow:hidden; border-radius: calc(var(--radius-lg) - 1px);
  padding: clamp(30px, 6vw, 56px) clamp(20px, 5vw, 48px);
  background: radial-gradient(120% 160% at 8% 0%, rgba(200,18,67,0.28), transparent 55%),
              radial-gradient(120% 160% at 100% 100%, rgba(240,180,41,0.16), transparent 55%),
              linear-gradient(180deg, var(--ink-900), var(--ink-800));
  text-align:center; color: var(--ink-text);
}
.naih-mesh{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.85; pointer-events:none; }
.naih-mesh-lines line{ stroke: var(--gold); stroke-width:1; opacity:.14; }
.naih-mesh-dots circle{ fill: var(--gold); opacity:.5; animation: nai-twinkle 3.6s ease-in-out infinite; }
.naih-mesh-dots circle:nth-child(3n){ animation-delay:-1.1s; fill: var(--ruby-light); }
.naih-mesh-dots circle:nth-child(4n){ animation-delay:-2.3s; }
.naih-mesh-flow .f{
  fill:none; stroke: var(--ruby-light); stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray:8 240; opacity:.65; animation: nai-flow 5s linear infinite; animation-delay: var(--d, 0s);
}
.naih-hero > *{ position:relative; z-index:1; }

.naih-eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 15px; border-radius: var(--radius-pill);
  background: rgba(240,180,41,0.14); border:1px solid rgba(240,180,41,0.3);
  color: var(--gold); font-weight:800; font-size:0.78rem; margin-bottom:16px;
}
.naih-eyebrow svg{ width:14px; height:14px; }
.naih-hero h1{ margin:0 0 14px; font-size: clamp(1.5rem, 3.2vw, 2.15rem); font-weight:900; line-height:1.5; color: var(--ink-text); }
.naih-hero h1 .grad{
  background: linear-gradient(90deg, var(--ruby-light), var(--gold)); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.naih-lead{ margin:0 auto 24px; max-width:60ch; color: var(--ink-text-muted); font-size:0.94rem; line-height:1.9; }
.naih-cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.naih-btn-outline{ border-color: rgba(255,255,255,0.25); color: var(--ink-text); }
.naih-btn-outline:hover{ border-color: var(--gold); color: var(--gold); }
.naih-trust-row{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  font-size:0.8rem; color: var(--ink-text-muted); font-weight:600;
}
.naih-trust-row span{ display:inline-flex; align-items:center; gap:6px; }
.naih-trust-row svg{ width:16px; height:16px; color: var(--gold); flex-shrink:0; }

/* ---------- tool cards ---------- */
/* بزرگ‌تر از قبل و در ۳ ستون (نه ۴+) — چون از ۱۰ کارتِ باریک به ۷ کارتِ
   پررنگ‌تر رسیدیم (۲۰۲۶-۰۹-۲۱)، هدف این است که با یک نگاه، هم برچسبِ ابزار
   هم توضیحش هم (برای استودیوها) حالت‌های داخلش خوانا باشد. */
.naih-tool-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap:20px; margin-top:30px;
}
.naih-tool-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding:30px 26px; text-decoration:none; color:inherit; overflow:hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  opacity:0; transform: translateY(14px);
}
.naih-tool-card.in-view{ animation: whyusCardIn .55s ease forwards; animation-delay: calc(var(--i, 0) * .08s); }
.naih-tool-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: var(--nai-accent, var(--ruby));
}
.naih-tool-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--nai-accent, var(--ruby)) 55%, var(--border-soft));
  box-shadow: 0 24px 48px -22px color-mix(in srgb, var(--nai-accent, var(--ruby)) 55%, transparent);
}
.naih-tool-ico{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--nai-accent, var(--ruby));
  background: color-mix(in srgb, var(--nai-accent, var(--ruby)) 14%, transparent);
  transition: transform .3s ease;
}
.naih-tool-card:hover .naih-tool-ico{ transform: scale(1.1) rotate(-6deg); }
.naih-tool-ico svg{ width:30px; height:30px; }
.naih-tool-card h3{ margin:6px 0 0; font-size:1.22rem; font-weight:900; color: var(--text); }
.naih-tool-card p{ margin:0; color: var(--text-muted); font-size:0.92rem; line-height:1.85; flex:1; }
.naih-tool-modes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.naih-tool-mode-chip{
  display:inline-flex; align-items:center; padding:4px 12px; border-radius: var(--radius-pill);
  font-size:0.72rem; font-weight:800; color: var(--nai-accent, var(--ruby));
  background: color-mix(in srgb, var(--nai-accent, var(--ruby)) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--nai-accent, var(--ruby)) 30%, transparent);
}
.naih-tool-cta{
  margin-top:10px; font-size:0.9rem; font-weight:800; color: var(--nai-accent, var(--ruby));
  display:inline-flex; align-items:center; gap:4px;
}
.naih-tool-arrow{ transition: transform .2s ease; }
.naih-tool-card:hover .naih-tool-arrow{ transform: translateX(-4px); }
.naih-tool-card--combo{ border-width:1.5px; border-style:dashed; }
.naih-tool-card--combo:hover{ border-style:solid; }
@media (prefers-reduced-motion: reduce){
  .naih-tool-card{ opacity:1; transform:none; }
  .naih-tool-card.in-view{ animation:none; }
}

/* ---------- combo picker page (/nabeghe-ai/studio/<key>) ---------- */
.naih-combo-hero{
  position:relative; text-align:center; padding: clamp(28px, 5vw, 46px) clamp(16px, 4vw, 30px);
  border-radius: var(--radius-lg); overflow:hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--nai-accent) 10%, var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb, var(--nai-accent) 30%, var(--border-soft));
}
.naih-combo-hero::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background: var(--nai-accent);
}
.naih-combo-hero h1{ margin:10px 0 8px; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight:900; color: var(--text); }
.naih-combo-back{
  position:absolute; top:16px; inset-inline-start:16px; font-size:0.78rem; font-weight:700;
  color: var(--text-muted); text-decoration:none;
}
.naih-combo-back:hover{ color: var(--nai-accent); }
.naih-tool-grid--combo{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width:900px; margin-inline:auto; }
.naih-tool-card--xl{ padding:38px 30px; gap:14px; }
.naih-tool-ico--xl{ width:78px; height:78px; }
.naih-tool-ico--xl svg{ width:36px; height:36px; }
.naih-tool-card--xl h3{ font-size:1.35rem; }
.naih-tool-card--xl p{ font-size:0.98rem; }

/* ---------- pricing ---------- */
.naih-pricing-wrap{ max-width:820px; margin:0 auto; }
.naih-pricing{
  position:relative; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: clamp(22px, 4vw, 38px); text-align:center;
  overflow:hidden;
}
.naih-pricing::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--ruby), var(--gold), var(--ruby-light));
}
.naih-pricing-head{ margin-bottom:22px; }
.naih-pricing-head .eyebrow{ display:block; text-align:center; color: var(--ruby); font-weight:700; font-size:0.78rem; }
.naih-pricing-head h2{ margin:8px 0 8px; font-size:1.2rem; font-weight:900; }
.naih-price-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:26px; }
.naih-price-item{
  position:relative; background: var(--surface-2); border:1.5px solid var(--border-soft); border-radius: var(--radius-md);
  padding:18px 10px; transition: transform .18s ease, border-color .18s ease;
}
.naih-price-item:hover{ transform: translateY(-3px); border-color: var(--ruby-light); }
.naih-price-item.is-best{ border-color: var(--gold); background: linear-gradient(160deg, var(--surface-2), #FFF9EC); }
.naih-price-badge{
  position:absolute; top:-11px; left:50%; transform: translateX(50%);
  background: linear-gradient(135deg, var(--gold), #d99a1a); color:#2b1400; font-weight:800; font-size:0.64rem;
  padding:3px 10px; border-radius:999px; box-shadow: 0 6px 14px -6px rgba(240,180,41,0.7);
}
.naih-price-item .dur{ font-weight:800; font-size:0.88rem; margin-bottom:8px; color: var(--text-muted); }
.naih-price-item .price{ font-weight:900; font-size:1.15rem; color: var(--ruby); font-family: var(--font-mono); }
.naih-price-item .price small{ font-family:inherit; font-size:0.62rem; font-weight:700; color: var(--text-muted); }
.naih-price-item .permo{ font-size:0.7rem; color: var(--text-faint); margin-top:6px; }
.naih-price-empty{ color: var(--text-muted); font-size:0.9rem; margin-bottom:20px; }
.naih-price-cta{ padding:12px 30px; }

@media (max-width:600px){
  .naih-tool-grid, .naih-tool-grid--combo{ grid-template-columns: 1fr; gap:14px; }
  .naih-tool-card{ padding:20px 16px; gap:8px; }
  .naih-tool-ico{ width:52px; height:52px; }
  .naih-tool-ico svg{ width:24px; height:24px; }
  .naih-tool-card h3{ font-size:1.05rem; }
  .naih-tool-card p{ font-size:0.84rem; line-height:1.75; }
  .naih-tool-cta{ font-size:0.8rem; }
  .naih-tool-card--xl{ padding:26px 18px; }
  .naih-tool-ico--xl{ width:60px; height:60px; }
  .naih-tool-ico--xl svg{ width:28px; height:28px; }
  .naih-hero{ padding: 24px 16px; }
  .naih-lead{ font-size:0.84rem; }
  .naih-trust-row{ gap:10px; font-size:0.72rem; }
  .naih-deco-ring{ display:none; }
  .naih-pricing{ padding:20px 14px; }
  .naih-price-row{ grid-template-columns: 1fr 1fr; gap:9px; }
}
@media (prefers-reduced-motion: reduce){
  .naih-deco-glow, .naih-deco-ring, .naih-deco-dot, .naih-mesh-flow .f, .naih-mesh-dots circle{ animation:none !important; }
}

/* ---------- decorative frame around the card (lives outside it, since .nai-card
   itself needs overflow:hidden for its gradient-border trick) ---------- */
.nai-card-wrap{ position:relative; max-width:680px; margin:0 auto; padding:26px 14px; }
.nai-deco{ position:absolute; pointer-events:none; }
.nai-deco-glow{
  inset:-10% -6%; border-radius:40%;
  background: radial-gradient(closest-side, rgba(200,18,67,0.16), transparent 70%),
              radial-gradient(closest-side, rgba(240,180,41,0.12), transparent 75%);
  filter: blur(28px); z-index:0; animation: nai-glow-pulse 6s ease-in-out infinite;
}
@keyframes nai-glow-pulse{ 0%,100%{ opacity:.7; transform: scale(1); } 50%{ opacity:1; transform: scale(1.04); } }
.nai-deco-ring{
  width:120px; height:120px; top:-38px; left:-30px; border-radius:50%;
  border:1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  animation: nai-spin 22s linear infinite; z-index:0;
}
@keyframes nai-spin{ to{ transform: rotate(360deg); } }
.nai-deco-dot{ border-radius:50%; z-index:0; animation: nai-float 4s ease-in-out infinite; }
.nai-deco-dot.d1{ width:10px; height:10px; top:6px; right:8%; background: var(--gold); box-shadow:0 0 12px 2px rgba(240,180,41,0.6); animation-delay:.2s; }
.nai-deco-dot.d2{ width:14px; height:14px; bottom:22px; left:-4px; background: var(--ruby-light); box-shadow:0 0 14px 2px rgba(255,67,104,0.55); animation-delay:1.1s; }
.nai-deco-dot.d3{ width:7px; height:7px; bottom:60px; right:-6px; background: var(--gold); box-shadow:0 0 10px 2px rgba(240,180,41,0.55); animation-delay:2s; }
.nai-deco-corner{
  width:34px; height:34px; z-index:0; border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  border-style:solid; border-width:0;
}
.nai-deco-corner.c1{ top:10px; right:10px; border-top-width:2.5px; border-right-width:2.5px; border-radius:0 10px 0 0; }
.nai-deco-corner.c2{ bottom:10px; left:10px; border-bottom-width:2.5px; border-left-width:2.5px; border-radius:0 0 0 10px; }
.nai-deco-badge{
  position:absolute; top:2px; left:24px; z-index:2; transform: rotate(-4deg);
  background: linear-gradient(135deg, var(--gold), #d99a1a); color:#2b1400; font-weight:800; font-size:0.68rem;
  padding:5px 12px; border-radius:8px; box-shadow: 0 6px 14px -6px rgba(240,180,41,0.7);
}
@media (max-width:480px){ .nai-deco-ring, .nai-deco-corner{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .nai-deco-glow, .nai-deco-ring, .nai-deco-dot{ animation:none !important; }
}

/* ---------- one merged card: big banner image seamlessly attached to the teaser ---------- */
.nai-card{
  position:relative; z-index:1; border-radius: 14px; overflow:hidden;
  padding:1.5px; /* thin gradient "border" via padding + inner background, a bit different from a plain solid border */
  background: linear-gradient(135deg, var(--ruby-light), var(--gold), var(--ruby));
  box-shadow: var(--shadow-card);
}
.nai-card-inner{ border-radius:12.5px; overflow:hidden; background: var(--ink-900); }
.nai-banner{
  position:relative; overflow:hidden; min-height:120px; aspect-ratio: 21/7;
  border-radius:0; margin-bottom:0; box-shadow:none; display:block;
}
@media (max-width:700px){ .nai-banner{ aspect-ratio: 16/10; } }

/* ---------- compact homepage teaser (dark, flows into the banner image above) ---------- */
.nai-teaser{
  position:relative; overflow:hidden; border-radius:0;
  padding: 18px clamp(14px, 3vw, 26px); text-align:center;
  background: radial-gradient(120% 160% at 8% 0%, rgba(200,18,67,0.28), transparent 55%),
              radial-gradient(120% 160% at 100% 100%, rgba(240,180,41,0.16), transparent 55%),
              linear-gradient(180deg, var(--ink-900), var(--ink-800));
  border:none; color: var(--ink-text);
}
.nai-teaser::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:160%;
  background: radial-gradient(closest-side, rgba(240,180,41,0.14), transparent 70%);
  animation: nai-drift 16s ease-in-out infinite; pointer-events:none;
}
@keyframes nai-drift{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(4%, 3%); } }
.nai-teaser > *{ position:relative; z-index:1; }
.nai-teaser .nai-eyebrow{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius: var(--radius-pill);
  background: rgba(240,180,41,0.14); border:1px solid rgba(240,180,41,0.3);
  color: var(--gold); font-weight:800; font-size:0.7rem; margin-bottom:8px;
}
.nai-teaser h2{ margin:4px 0 14px; font-size: clamp(0.92rem, 2vw, 1.15rem); font-weight:900; color: var(--ink-text); }
.nai-more-btn{
  font-size:0.72rem; padding:6px 14px; border-color: rgba(255,255,255,0.25); color: var(--ink-text-muted);
}
.nai-more-btn:hover{ border-color: var(--gold); color: var(--gold); }

/* constellation/network background — dots + faint lines + a few flowing pulses */
.nai-mesh{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; pointer-events:none;
}
.nai-mesh-lines line{ stroke: var(--gold); stroke-width:1; opacity:.16; }
.nai-mesh-dots circle{
  fill: var(--gold); opacity:.5; animation: nai-twinkle 3.6s ease-in-out infinite;
}
.nai-mesh-dots circle:nth-child(3n){ animation-delay: -1.1s; fill: var(--ruby-light); }
.nai-mesh-dots circle:nth-child(4n){ animation-delay: -2.3s; }
.nai-mesh-flow .f{
  fill:none; stroke: var(--ruby-light); stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray: 8 240; opacity:.7; animation: nai-flow 5s linear infinite; animation-delay: var(--d, 0s);
}
@keyframes nai-flow{ to{ stroke-dashoffset:-248; } }
@keyframes nai-twinkle{ 0%,100%{ opacity:.3; } 50%{ opacity:.85; } }
@media (prefers-reduced-motion: reduce){
  .nai-mesh-flow .f, .nai-mesh-dots circle{ animation:none !important; }
}

/* بزرگ‌تر شد (۲۰۲۶-۰۹-۲۱) — از ردیفِ باریکِ آیکون+برچسب به کارت‌های واقعی
   با تگ‌لاین، تا در نگاهِ اول واضح باشد با کلیک چه اتفاقی می‌افتد؛ همچنان
   روی پس‌زمینهٔ تیرهٔ همین بخش (رنگ‌های ink-*) طراحی شده. */
.nai-teaser-row{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(10px, 2.4vw, 16px);
  margin-bottom:18px; text-align:center;
}
.nai-teaser-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:var(--ink-text); opacity:0; padding:20px 14px;
  border-radius: var(--radius-md); border:1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.035);
  animation: nai-pop .5s ease forwards; animation-delay: calc(var(--i, 0) * .09s);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.nai-teaser-item:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--nai-accent, var(--gold)) 55%, transparent);
  background: rgba(255,255,255,0.065);
}
.nai-teaser-item--combo{ border-style:dashed; }
.nai-teaser-item--combo:hover{ border-style:solid; }
.nai-teaser-icon{
  display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  color: color-mix(in srgb, var(--nai-accent, var(--gold)) 85%, white 15%);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--nai-accent, var(--gold)) 45%, transparent), color-mix(in srgb, var(--nai-accent, var(--gold)) 10%, transparent));
  border:1.8px solid color-mix(in srgb, var(--nai-accent, var(--gold)) 75%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nai-accent, var(--gold)) 10%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--nai-accent, var(--gold)) 75%, transparent);
  animation: nai-float 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .18s);
  transition: transform .2s ease, box-shadow .2s ease;
  flex-shrink:0;
}
.nai-teaser-icon svg{ width:25px; height:25px; }
.nai-teaser-item:hover .nai-teaser-icon{
  transform: scale(1.16); box-shadow: 0 0 0 6px color-mix(in srgb, var(--nai-accent, var(--gold)) 16%, transparent), 0 10px 22px -6px color-mix(in srgb, var(--nai-accent, var(--gold)) 95%, transparent);
}
.nai-teaser-label{ font-size:0.86rem; font-weight:800; color: var(--ink-text); }
.nai-teaser-tagline{ font-size:0.72rem; color: var(--ink-text-muted); line-height:1.6; }
.nai-teaser-modes{
  font-size:0.66rem; font-weight:700; color: var(--nai-accent, var(--gold));
  background: color-mix(in srgb, var(--nai-accent, var(--gold)) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--nai-accent, var(--gold)) 30%, transparent);
  padding:3px 10px; border-radius: var(--radius-pill);
}
.nai-teaser-go{
  font-size:0.68rem; font-weight:700; color: var(--nai-accent, var(--gold)); opacity:.85; margin-top:2px;
  transition: opacity .18s ease, transform .18s ease;
}
.nai-teaser-item:hover .nai-teaser-go{ opacity:1; transform: translateY(1px); }

@keyframes nai-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }
@keyframes nai-pop{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .nai-teaser::before, .nai-teaser-emoji, .nai-teaser-item{ animation:none !important; opacity:1 !important; }
}

/* =========================================================================
   Nabeghe AI — full-bleed homepage showcase (۲۰۲۶-۰۹-۲۱ redesign)
   قبلاً همه‌چیز داخل یک «کارت» با max-width:680px محدود می‌شد (روی دسکتاپ
   انگار در یک ستون باریک گیر افتاده بود) و یک بنرِ تصویری هم بالای آن بود.
   طراحیِ تازه: خودِ سکشن یک نوارِ تمام‌عرض (edge-to-edge) با پس‌زمینهٔ تیره/
   گرادیانِ متحرک است (بدون قاب/بکگراندِ جداگانه)، بدون بنرِ تصویری، و
   محتوا (تیتر + کارت‌ها) در همان --container معمولیِ سایت (۱۱۸۰px) جا
   می‌گیرد اما دیگر به ۶۸۰px محدود نیست. اولین ابزار (persona) به‌صورت یک
   کارتِ ویژهٔ افقیِ بزرگ («spotlight») نشان داده می‌شود، بقیه در یک گریدِ
   ۳ستونه‌ی یکنواخت و بزرگ. کد/کلاس‌های قبلیِ nai-card/nai-teaser دست‌نخورده
   باقی می‌مانند (استفاده نمی‌شوند) تا برگشت به نسخهٔ قبل در صورتِ نیاز ساده
   بماند — یک نسخهٔ کامل از index.html/این فایل هم در backups/ گرفته شد.
   ========================================================================= */
/* استودیوی نابغه — رنگِ دیفالتِ برندِ تازه (آبی)، مستقل از رنگِ اختصاصیِ
   هر ابزار که رویِ خودِ کارت‌ها (--nai-accent) می‌ماند — ۱۴۰۵/۰۷/۱۰. یک گلویِ
   مکملِ گرم (نارنجی) هم نگه داشته شد تا پس‌زمینه تک‌رنگ/کسل‌کننده نشود. */
:root{
  --studio-accent: #2F63E0;
  --studio-accent-deep: #1E3F99;
  --studio-accent-light: #6C92F0;
}

.nais{
  position:relative; overflow:hidden; isolation:isolate;
  width:100vw; margin-inline-start:calc(50% - 50vw);
  margin-top: clamp(20px, 3vw, 36px); margin-bottom: clamp(20px, 3vw, 36px);
  padding: clamp(34px, 5vw, 56px) 0 clamp(38px, 5.5vw, 60px);
  background:
    radial-gradient(140% 180% at 10% -10%, rgba(47,99,224,0.32), transparent 55%),
    radial-gradient(120% 160% at 95% 110%, rgba(230,126,34,0.16), transparent 55%),
    linear-gradient(180deg, var(--ink-900), var(--ink-800));
  color: var(--ink-text);
}
.nais-mesh{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.85; pointer-events:none; }
.nais-mesh-lines line{ stroke: var(--studio-accent-light); stroke-width:1; opacity:.14; }
.nais-mesh-dots circle{ fill: var(--studio-accent-light); opacity:.5; animation: nai-twinkle 3.6s ease-in-out infinite; }
.nais-mesh-dots circle:nth-child(3n){ animation-delay:-1.1s; fill: #E6821F; }
.nais-mesh-dots circle:nth-child(4n){ animation-delay:-2.3s; }
.nais-mesh-flow .f{
  fill:none; stroke: var(--studio-accent-light); stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray: 8 260; opacity:.65; animation: nai-flow 5.5s linear infinite; animation-delay: var(--d, 0s);
}
.nais-glow{ position:absolute; border-radius:50%; filter: blur(60px); pointer-events:none; z-index:0; animation: nai-glow-pulse 7s ease-in-out infinite; }
.nais-glow--a{ width:420px; height:420px; top:-140px; inset-inline-start:-100px; background: rgba(47,99,224,0.38); }
.nais-glow--b{ width:380px; height:380px; bottom:-160px; inset-inline-end:-80px; background: rgba(230,126,34,0.22); animation-delay:-3.5s; }

.nais-inner{ position:relative; z-index:1; }
/* یک پنلِ شیشه‌ایِ ملایم پشتِ عنوان/توضیح — چون پس‌زمینهٔ متحرکِ سکشن
   گاهی خوانایی متن را کم می‌کرد؛ backdrop-blur باعث می‌شود مِش/گلوهای پشتش
   محو دیده شوند ولی متن همیشه واضح بماند. */
.nais-head{
  max-width:760px; margin:0 auto 28px; text-align:center;
  padding: 22px 26px; border-radius: 20px;
  background: rgba(10,10,20,0.28); border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nais-eyebrow{
  display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius: var(--radius-pill);
  background: rgba(47,99,224,0.16); border:1.5px dashed rgba(47,99,224,0.5);
  color: var(--studio-accent-light); font-weight:800; font-size:0.76rem; margin-bottom:14px;
  animation: naisEyebrowPulse 2.6s ease-in-out infinite;
}
@keyframes naisEyebrowPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,99,224,0.25); border-color: rgba(47,99,224,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(47,99,224,0); border-color: rgba(47,99,224,0.95); }
}
@media (prefers-reduced-motion: reduce){
  .nais-eyebrow{ animation:none; }
}
.nais-head h2{ margin:0 0 12px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight:900; color: var(--ink-text); }
.nais-lead{ margin:0; color: var(--ink-text-muted); font-size:0.95rem; line-height:1.85; }

/* ── کارتِ ویژه (اولین ابزار) ── */
.nais-spot{
  position:relative; display:flex; align-items:center; gap:22px; text-decoration:none; color:inherit;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--nai-accent) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--ink-800) 88%, black 8%);
  border:1.5px solid color-mix(in srgb, var(--nai-accent) 45%, rgba(255,255,255,0.12));
  border-radius: 22px; padding: 20px 26px; margin-bottom:16px; overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.nais-spot::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.4; pointer-events:none;
  background: radial-gradient(60% 140% at 100% 0%, color-mix(in srgb, var(--nai-accent) 30%, transparent), transparent 70%);
}
.nais-spot:hover{
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--nai-accent) 75%, transparent);
  box-shadow: 0 28px 60px -26px color-mix(in srgb, var(--nai-accent) 65%, transparent);
}
.nais-spot-badge{
  position:absolute; top:14px; inset-inline-end:18px; z-index:1; font-size:0.68rem; font-weight:800;
  color: var(--gold); background: rgba(240,180,41,0.14); border:1px solid rgba(240,180,41,0.35);
  padding:4px 11px; border-radius: var(--radius-pill);
}
/* آیکنِ دایره‌ای با نورِ محیطی و شناوریِ ملایم — همان حسِ نسخهٔ قبلی که
   کاربر ترجیح داد، روی کارتِ ویژه هم اعمال شد. */
.nais-spot-ico{
  position:relative; z-index:1; flex-shrink:0; width:92px; height:92px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: color-mix(in srgb, var(--nai-accent) 85%, white 15%);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--nai-accent) 55%, transparent), color-mix(in srgb, var(--nai-accent) 15%, transparent));
  border:1.8px solid color-mix(in srgb, var(--nai-accent) 75%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--nai-accent) 12%, transparent), 0 12px 28px -8px color-mix(in srgb, var(--nai-accent) 80%, transparent);
  animation: nai-float 3.4s ease-in-out infinite;
}
.nais-spot-ico svg{ width:42px; height:42px; }
.nais-spot-body{ position:relative; z-index:1; flex:1; min-width:0; }
.nais-spot-body h3{ margin:0 0 4px; font-size:1.22rem; font-weight:900; color:#fff; }
.nais-spot-body p{ margin:0; color: var(--ink-text-muted); font-size:0.88rem; line-height:1.75; max-width:560px; }
.nais-spot-modes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.nais-spot-modes span{
  font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius: var(--radius-pill); color: var(--nai-accent);
  background: color-mix(in srgb, var(--nai-accent) 20%, transparent); border:1px solid color-mix(in srgb, var(--nai-accent) 40%, transparent);
}
.nais-spot-cta{
  position:relative; z-index:1; flex-shrink:0; font-weight:800; font-size:0.88rem; color:#fff;
  background: var(--nai-accent); padding:10px 18px; border-radius: var(--radius-pill);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--nai-accent) 70%, transparent);
}
.nais-arrow{ transition: transform .2s ease; }
.nais-spot:hover .nais-arrow{ transform: translateX(-4px); }

/* ── گریدِ بقیهٔ ابزارها ── */
.nais-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.nais-card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  /* کمتر شیشه‌ای از نسخهٔ اول — یک زمینهٔ تقریباً یک‌دستِ تیره زیرِ یک
     هایلایتِ ملایم، تا پس‌زمینهٔ متحرکِ پشتِ کارت از زیرش رد نشود و متن/
     آیکن همیشه واضح دیده شود. */
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06), transparent 55%),
    color-mix(in srgb, var(--ink-800) 86%, black 10%);
  border:1px solid rgba(255,255,255,0.1); border-radius:18px;
  padding:20px 20px; text-decoration:none; color: var(--ink-text); overflow:hidden;
  opacity:0; transform: translateY(14px); animation: whyusCardIn .55s ease forwards; animation-delay: calc(var(--i, 0) * .07s);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nais-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--nai-accent); }
.nais-card:hover{
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--nai-accent) 60%, transparent);
  box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--nai-accent) 60%, transparent);
}
.nais-card-ico{
  width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: color-mix(in srgb, var(--nai-accent) 85%, white 15%);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--nai-accent) 50%, transparent), color-mix(in srgb, var(--nai-accent) 12%, transparent));
  border:1.6px solid color-mix(in srgb, var(--nai-accent) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nai-accent) 10%, transparent), 0 8px 18px -6px color-mix(in srgb, var(--nai-accent) 75%, transparent);
  animation: nai-float 3.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .15s);
}
.nais-card-ico svg{ width:28px; height:28px; }
.nais-card h3{ margin:2px 0 0; font-size:1rem; font-weight:800; color:#fff; }
.nais-card p{ margin:0; color: var(--ink-text-muted); font-size:0.82rem; line-height:1.7; flex:1; }
.nais-card-cta{ margin-top:2px; font-size:0.8rem; font-weight:800; color: var(--nai-accent); display:inline-flex; align-items:center; gap:4px; }
.nais-card:hover .nais-arrow{ transform: translateX(-4px); }

.nais-foot{ text-align:center; margin-top:22px; }
.nais-more-btn{ border-color: rgba(255,255,255,0.28); color: var(--ink-text-muted); }
.nais-more-btn:hover{ border-color: var(--gold); color: var(--gold); }

@media (max-width:900px){
  .nais-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:700px){
  .nais{ margin-top:12px; margin-bottom:12px; }
  .nais-head{ margin-bottom:18px; padding:16px 18px; }
  .nais-spot{ flex-direction:column; text-align:center; padding:16px 14px; gap:8px; margin-bottom:12px; }
  .nais-spot-badge{ position:static; display:inline-block; margin-bottom:2px; }
  .nais-spot-ico{ width:54px; height:54px; }
  .nais-spot-ico svg{ width:24px; height:24px; }
  .nais-spot-body h3{ font-size:1.05rem; margin-bottom:2px; }
  .nais-spot-body p{ font-size:0.8rem; line-height:1.6; }
  .nais-spot-cta{ width:100%; justify-content:center; padding:8px 16px; font-size:0.82rem; }
  .nais-grid{ grid-template-columns: repeat(2, 1fr); gap:10px; }
  .nais-card{ padding:14px 14px; gap:6px; border-radius:14px; }
  .nais-card-ico{ width:40px; height:40px; }
  .nais-card-ico svg{ width:18px; height:18px; }
  .nais-card h3{ font-size:0.86rem; }
  .nais-card p{ font-size:0.74rem; line-height:1.55; }
  .nais-card-cta{ font-size:0.72rem; }
  .nais-foot{ margin-top:16px; }
}
@media (max-width:420px){
  .nais-grid{ grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .nais-mesh-flow .f, .nais-mesh-dots circle, .nais-glow, .nais-spot-ico, .nais-card-ico{ animation:none !important; }
  .nais-card{ opacity:1; transform:none; animation:none; }
}

/* دکمهٔ ورود به استودیو — رویِ پس‌زمینهٔ تیرهٔ همین سکشن، با رنگِ برندِ
   تازهٔ استودیوی نابغه (آبی) به‌جایِ رنگِ عمومیِ ruby سایت، تا خودش هم با
   هویتِ تازه هم‌خوان باشد. */
.nais-studio-btn{
  background: linear-gradient(135deg, var(--studio-accent), var(--studio-accent-deep)); border:none; color:#fff;
  box-shadow: 0 14px 30px -12px rgba(47,99,224,0.6); display:inline-flex; align-items:center; gap:6px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nais-studio-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(47,99,224,0.75); color:#fff; }

/* صفحهٔ اصلی — یک باکسِ واحد و جامع به‌جایِ گریدِ چندتایی (اصلاحِ صریحِ
   کاربر، ۱۴۰۵/۰۷/۱۰): کلِ باکس یک لینکِ واحد به‌سمتِ استودیوی نابغه است
   (داخلِ خودِ محیط هوشمند، نه صفحهٔ بازاریابی) — چیپ‌هایِ پایین صرفاً
   اطلاعاتی‌اند، نه لینکِ جدا. */
.nais-mega{
  position:relative; z-index:1; display:block; max-width:860px; margin:0 auto; text-decoration:none; color:inherit;
  text-align:center;
  padding: clamp(28px, 4.5vw, 46px) clamp(24px, 4.5vw, 44px); border-radius:28px; overflow:hidden;
  /* ترفندِ «حاشیهٔ گرادیانیِ متحرک» — دو پس‌زمینه روی یک المان: یکی تیره
     که فقط داخلِ padding-box نشسته، یکی گرادیانی که کلِ border-box را پر
     می‌کند؛ نتیجه یک قابِ نازکِ رنگارنگِ همیشه‌زنده، بدونِ نیاز به یک
     wrapper/عنصرِ اضافه (۱۴۰۵/۰۷/۱۱، درخواستِ کاربر برایِ ظاهرِ حرفه‌ای‌تر). */
  border:1.5px solid transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--ink-800) 94%, black 6%), color-mix(in srgb, var(--ink-800) 94%, black 6%)) padding-box,
    linear-gradient(120deg, var(--studio-accent-light), #E6821F, var(--studio-accent)) border-box;
  background-size: 100% 100%, 240% 240%;
  animation: naisMegaBorder 9s ease infinite;
  transition: transform .25s ease, box-shadow .25s ease;
}
@keyframes naisMegaBorder{
  0%, 100%{ background-position: 0 0, 0% 50%; }
  50%{ background-position: 0 0, 100% 50%; }
}
.nais-mega::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background: radial-gradient(70% 160% at 100% 0%, color-mix(in srgb, var(--studio-accent) 34%, transparent), transparent 70%);
}
.nais-mega:hover{
  transform: translateY(-6px); color:inherit;
  box-shadow: 0 32px 68px -26px rgba(47,99,224,0.6);
}
.nais-mega-kicker-row{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px;
}
.nais-mega-kicker{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.78rem; font-weight:800; color: var(--studio-accent-light);
  padding:5px 13px; border-radius: var(--radius-pill);
  background: rgba(47,99,224,0.16); border:1.5px dashed rgba(47,99,224,0.5);
}
.nais-mega-ico{
  flex-shrink:0; width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color: var(--studio-accent-light);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--studio-accent) 55%, transparent), color-mix(in srgb, var(--studio-accent) 15%, transparent));
  border:1.6px solid color-mix(in srgb, var(--studio-accent) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--studio-accent) 12%, transparent);
  animation: nai-float 3.4s ease-in-out infinite;
}
.nais-mega-ico svg{ width:17px; height:17px; }
.nais-mega-title{
  position:relative; z-index:1; margin:0 0 14px; font-size: clamp(1.25rem, 2.8vw, 1.8rem); font-weight:900; color: var(--ink-text); line-height:1.5;
}
.nais-mega > .nais-lead{ position:relative; z-index:1; margin:0 auto 20px; max-width:62ch; text-align:center; }
.nais-mega-stats{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:18px; margin:0 auto 22px;
  padding:14px 20px; border-radius:16px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); width:fit-content;
}
.nais-mega-stat{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.nais-mega-stat b{ font-size:1.02rem; font-weight:800; color: var(--studio-accent-light); line-height:1.3; white-space:nowrap; }
.nais-mega-stat span{ font-size:0.7rem; color: var(--ink-text-muted); font-weight:700; }
.nais-mega-stat-sep{ width:1px; height:28px; background: rgba(255,255,255,0.14); }
.nais-mega-chips{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom:26px; }
.nais-mega-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:0.78rem; font-weight:700;
  color: color-mix(in srgb, var(--nai-accent) 85%, white 15%);
  background: color-mix(in srgb, var(--nai-accent) 8%, transparent);
  border:1px dashed color-mix(in srgb, var(--nai-accent) 48%, transparent);
  padding:6px 13px; border-radius: var(--radius-pill);
  transition: transform .18s ease, background .18s ease;
}
.nais-mega:hover .nais-mega-chip{ transform: translateY(-1px); background: color-mix(in srgb, var(--nai-accent) 13%, transparent); }
.nais-mega-chip svg{ width:15px; height:15px; }
.nais-mega-cta{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:0.96rem; color:#fff;
  background: linear-gradient(135deg, var(--studio-accent-light), var(--studio-accent) 55%, var(--studio-accent-deep));
  padding:12px 26px; border-radius:14px;
  box-shadow: 0 14px 30px -12px rgba(47,99,224,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: box-shadow .22s ease, transform .22s ease;
}
.nais-mega:hover .nais-mega-cta{
  box-shadow: 0 18px 40px -10px rgba(47,99,224,0.85), inset 0 1px 0 rgba(255,255,255,0.35);
  transform: scale(1.035);
}
.nais-mega:hover .nais-mega-cta .nais-arrow{ transform: translateX(-4px); }
@media (max-width:640px){
  .nais-mega{ padding:22px 18px; border-radius:22px; }
  .nais-mega-kicker-row{ gap:8px; margin-bottom:10px; }
  .nais-mega-ico{ width:28px; height:28px; border-radius:9px; }
  .nais-mega-ico svg{ width:15px; height:15px; }
  .nais-mega-stats{ gap:10px; padding:11px 10px; width:100%; justify-content:space-around; margin-bottom:18px; }
  .nais-mega-stat{ flex:1; min-width:0; }
  .nais-mega-stat b{ font-size:0.8rem; white-space:normal; }
  .nais-mega-stat span{ font-size:0.6rem; }
  .nais-mega-chips{ gap:7px; margin-bottom:18px; }
  .nais-mega-chip{ font-size:0.72rem; padding:5px 11px; }
  .nais-mega-cta{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .nais-mega{ animation:none; }
}

/* =========================================================================
   صفحهٔ «استودیوی نابغه» (/nabeghe-ai) — بخش‌هایِ تازه (۱۴۰۵/۰۷/۱۰): هرو +
   چندین گریدِ nais-card زیرِ یک سرتیترِ بخش، به‌جایِ یک گریدِ تخت یا پنلِ
   سادهٔ سندی. همان پس‌زمینهٔ تیره/متحرکِ .nais بالا را ادامه می‌دهد (یک
   استودیوی واحد، نه چند صفحهٔ جدا).
   ========================================================================= */
.nst-hero{ text-align:center; max-width:760px; margin:0 auto 40px; }
.nst-hero .nais-eyebrow{ margin-bottom:16px; }
.nst-hero h1{ margin:0 0 14px; font-size: clamp(1.5rem, 3.4vw, 2.25rem); font-weight:900; line-height:1.5; color: var(--ink-text); }
.nst-hero h1 .grad{
  background: linear-gradient(90deg, var(--studio-accent-light), #E6821F); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.nst-lead{ margin:0 auto 22px; color: var(--ink-text-muted); font-size:0.96rem; line-height:1.9; max-width:62ch; }
.nst-toc{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.nst-toc a{
  display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:700;
  color: var(--studio-accent-light); text-decoration:none; padding:6px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  transition: border-color .15s ease, background .15s ease;
}
.nst-toc a:hover{ border-color: color-mix(in srgb, var(--studio-accent-light) 60%, transparent); background: rgba(255,255,255,0.09); }

.nst-section{ margin-top: clamp(30px, 4vw, 48px); scroll-margin-top:100px; }
.nst-section:first-of-type{ margin-top:0; }
.nst-section-head{
  display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.nst-section-ico{
  flex-shrink:0; width:48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  color: color-mix(in srgb, var(--nai-accent, var(--studio-accent)) 85%, white 15%);
  background: color-mix(in srgb, var(--nai-accent, var(--studio-accent)) 20%, transparent);
  border:1.5px solid color-mix(in srgb, var(--nai-accent, var(--studio-accent)) 55%, transparent);
}
.nst-section-ico svg{ width:23px; height:23px; }
.nst-section-body h2{ margin:0 0 3px; font-size:1.1rem; font-weight:900; color:#fff; }
.nst-section-body p{ margin:0; font-size:0.8rem; color: var(--ink-text-muted); }

/* بخشِ «دستیار شخصی» — عمداً کوچک‌تر، کم‌رنگ‌تر و بدونِ گریدِ جداگانه؛ یک
   ویژگیِ جانبیِ محبوب، نه محصولِ ششمِ اصلیِ استودیو (طبقِ خواستِ صریحِ کاربر). */
.nst-persona{ margin-top: clamp(36px, 5vw, 56px); padding-top:26px; border-top:1px dashed rgba(255,255,255,0.16); text-align:center; }
.nst-persona-eyebrow{ display:block; font-size:0.74rem; color: var(--ink-text-muted); font-weight:700; margin-bottom:14px; }
.nst-persona-card{
  display:flex; align-items:center; gap:14px; max-width:460px; margin:0 auto; text-decoration:none; color:inherit;
  padding:14px 20px; border-radius:18px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.nst-persona-card:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--nai-accent) 55%, transparent); background: rgba(255,255,255,0.065); }
.nst-persona-ico{
  flex-shrink:0; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: color-mix(in srgb, var(--nai-accent) 85%, white 15%);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--nai-accent) 45%, transparent), color-mix(in srgb, var(--nai-accent) 10%, transparent));
}
.nst-persona-ico svg{ width:21px; height:21px; }
.nst-persona-body{ min-width:0; text-align:start; }
.nst-persona-body b{ display:block; font-size:0.94rem; color:#fff; margin-bottom:2px; }
.nst-persona-body span{ font-size:0.78rem; color: var(--ink-text-muted); }
.nst-persona-go{ margin-inline-start:auto; font-size:0.78rem; font-weight:700; color: var(--nai-accent); flex-shrink:0; }

@media (max-width:700px){
  .nst-lead{ font-size:0.85rem; }
  .nst-toc a{ font-size:0.72rem; padding:5px 11px; }
  .nst-section{ margin-top:28px; }
  .nst-section-head{ gap:10px; margin-bottom:14px; padding-bottom:10px; }
  .nst-section-ico{ width:38px; height:38px; border-radius:12px; }
  .nst-section-ico svg{ width:18px; height:18px; }
  .nst-section-body h2{ font-size:0.96rem; }
  .nst-section-body p{ font-size:0.72rem; }
  .nst-persona-card{ flex-direction:column; text-align:center; padding:18px 16px; }
  .nst-persona-body{ text-align:center; }
  .nst-persona-go{ margin-inline-start:0; }
}