/* ══════════════════════════════════════════════
       ⚙️  تنظیمات اصلی — اینجا رو راحت ویرایش کن
       ══════════════════════════════════════════════ */
    :root {
      /* 🎨 رنگ پس‌زمینه اصلی سایت */
      --bg:          #080810;

      /* 🎨 رنگ اصلی (آبی) — برای تغییر کل تم فقط این را عوض کن */
      --accent:      #0A84FF;
      --accent-dark: #0063CC;
      --accent-text: #5DB3FF;

      /* 🥇 رنگ طلایی — برای پلن ویژه */
      --gold:        #C8A84B;
      --gold-light:  #E8C96A;
      --gold-dark:   #9B7D30;

      /* 🎨 رنگ‌های متن */
      --text:        #F5F5F7;
      --text-dim:    rgba(245, 245, 247, 0.55);
      --text-faint:  rgba(245, 245, 247, 0.30);

      /* 🪟 شیشه‌ای (Glass) — پس‌زمینه کامپوننت‌ها */
      --glass:       rgba(255, 255, 255, 0.06);
      --glass-hover: rgba(255, 255, 255, 0.10);
      --glass-border:rgba(255, 255, 255, 0.09);

      /* 📐 گوشه‌های گرد */
      --radius:   16px;
      --radius-sm: 12px;
      --radius-lg: 24px;

      /* 🌀 بلر شیشه‌ای */
      --blur: blur(28px) saturate(200%);

      /* 🌑 سایه */
      --shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
    }

    /* ══════════════════════════════════════════════
       🔄 ریست و پایه
       ══════════════════════════════════════════════ */
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Vazirmatn', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* اسکرول‌بار سفارشی */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(10,132,255,0.4); border-radius: 4px; }

    /* ══════════════════════════════════════════════
       🌐 پس‌زمینه نورانی (Orbs)
       ══════════════════════════════════════════════ */
    .bg-orbs {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      animation: orbFloat 18s ease-in-out infinite;
    }

    /* 🎨 رنگ Orb ها را می‌توانی اینجا تغییر بدی */
    .orb-1 { width:700px; height:700px; background:#0B4FB5; top:-250px; right:-150px; opacity:.13; animation-delay:0s; }
    .orb-2 { width:550px; height:550px; background:#1D4ED8; bottom:-200px; left:-150px; opacity:.12; animation-delay:-6s; }
    .orb-3 { width:400px; height:400px; background:#B45309; top:50%; left:45%; transform:translate(-50%,-50%); opacity:.07; animation-delay:-12s; }

    @keyframes orbFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%       { transform: translate(25px, -25px) scale(1.04); }
      66%       { transform: translate(-20px, 20px) scale(0.97); }
    }

    /* ══════════════════════════════════════════════
       🧭 ناوبار دسکتاپ (Desktop Nav)
       ══════════════════════════════════════════════ */
    .navbar {
      position: fixed;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 200;
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 5px;
      border-radius: 50px;
      background: rgba(15, 15, 24, 0.82);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      box-shadow: 0 8px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
      white-space: nowrap;
    }

    .nav-item {
      padding: 9px 18px;
      border-radius: 40px;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
      border: none;
      background: none;
      font-family: 'Vazirmatn', sans-serif;
    }

    .nav-item:hover {
      color: var(--text);
      background: rgba(255,255,255,0.05);
    }

    .nav-item.active {
      background: rgba(10,132,255,0.22);
      color: var(--accent-text);
      border: 1px solid rgba(10,132,255,0.28);
    }

    /* ══════════════════════════════════════════════
       📱 تب‌بار موبایل (Mobile Tab Bar)
       ══════════════════════════════════════════════ */
    .tab-bar {
      display: none;
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 200;
      flex-direction: row;
      gap: 2px;
      padding: 7px;
      border-radius: 50px;
      background: rgba(15, 15, 24, 0.88);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    }

    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 9px 14px;
      border-radius: 40px;
      cursor: pointer;
      transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
      color: var(--text-faint);
      font-size: 10px;
      font-weight: 500;
      border: none;
      background: none;
      font-family: 'Vazirmatn', sans-serif;
      min-width: 46px;
    }

    .tab-item .tab-icon { font-size: 18px; line-height: 1; }
    .tab-item:hover, .tab-item.active { background: rgba(10,132,255,0.2); color: var(--accent-text); }

    @media (max-width: 700px) {
      .navbar  { display: none; }
      .tab-bar { display: flex; }
    }

    /* ══════════════════════════════════════════════
       📄 صفحات (Pages)
       ══════════════════════════════════════════════ */
    main { position: relative; z-index: 1; }

    .page {
  display: block;
  min-height: 100vh;
  padding: 90px 20px 110px;
}

    .page.active { display: block; }

    /* کانتینر محتوا */
    .container {
      max-width: 1060px;
      margin: 0 auto;
    }

    /* ══════════════════════════════════════════════
       🏷️  المان‌های مشترک (Shared Components)
       ══════════════════════════════════════════════ */

    /* برچسب بخش‌ها */
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 13px;
      border-radius: 40px;
      font-size: 12px;
      font-weight: 600;
      background: rgba(10,132,255,0.12);
      border: 1px solid rgba(10,132,255,0.24);
      color: var(--accent-text);
      margin-bottom: 14px;
    }

    .section-label::before {
      content: '';
      width: 6px; height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulseDot 2s infinite;
    }

    @keyframes pulseDot {
      0%, 100% { opacity:1; transform:scale(1); }
      50%       { opacity:.45; transform:scale(.8); }
    }

    /* هدر صفحات */
    .page-header {
      text-align: center;
      margin-bottom: 44px;
    }

    .page-title {
      font-size: clamp(28px, 5vw, 50px);
      font-weight: 800;
      margin-bottom: 10px;
    }

    .page-subtitle {
      font-size: 15px;
      color: var(--text-dim);
      font-weight: 300;
      line-height: 1.7;
    }

    /* کارت شیشه‌ای */
    .glass-card {
      background: var(--glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

    /* دکمه‌ها */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 26px;
      border-radius: 50px;
      font-size: 14.5px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      text-decoration: none;
      border: none;
      font-family: 'Vazirmatn', sans-serif;
    }

    /* دکمه اصلی (آبی) */
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-dark));
      color: #fff;
      box-shadow: 0 4px 22px rgba(10,132,255,0.38);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(10,132,255,0.5);
    }

    /* دکمه شیشه‌ای */
    .btn-glass {
      background: var(--glass);
      color: var(--text);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
    }
    .btn-glass:hover {
      background: var(--glass-hover);
      transform: translateY(-2px);
    }

    /* ══════════════════════════════════════════════
       🏠 صفحه خانه (Home Page)
       ══════════════════════════════════════════════ */
    #page-home {
      padding-top: 70px;
      display: none;
      flex-direction: column;
      align-items: center;
    }
    #page-home.active { display: flex; }

    .hero-section {
      width: 100%;
      max-width: 860px;
      margin: 0 auto;
      text-align: center;
      padding: 20px 0;
    }

    /* 🖼️ لوگو */
    .logo-wrap {
      margin-bottom: 24px;
      display: flex;
      justify-content: center;
    }

   /* ═══════════════════════════════════════════════
   🖼️ لوگوی صفحه خانه + افکت دود نورانی آبی
   ("Backlit Smoke" — با CSS + JS سبک)
   فقط در صفحه اصلی استفاده می‌شود
   ═══════════════════════════════════════════════ */

.logo-wrap {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;

  /* پایین‌ترین لایه — بدون تأثیر روی بقیه المان‌ها */
  position: relative;
  z-index: 0;

  /* فضای کافی برای خروج دود از کادر لوگو */
  padding: 60px 80px;
}

.logo-inner {
  position: relative;
  display: inline-flex;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* کمی بزرگنمایی هنگام هاور */
.logo-wrap.is-hovering .logo-inner {
  transform: scale(1.035);
}

/* ═══ خود لوگو ═══ */
.logo-img {
  /* ─────────────────────────────────────────
     ✏️ سایز لوگو — فقط همین عدد را عوض کن
  ───────────────────────────────────────── */
  height: 260px;

  width: auto;
  max-width: 90vw;
  display: block;
  position: relative;
  z-index: 2;

  /* لوگوی SVG رنگ تیره دارد → سفید + درخشش آبی */
  filter: brightness(0) invert(1)
          drop-shadow(0 0 18px rgba(10,132,255,0.25))
          drop-shadow(0 0 36px rgba(10,132,255,0.08));

  animation: logoGlowPulse 4s ease-in-out infinite;
  transition: filter 0.5s ease;
}

/* تنفس نور آبی در حالت عادی */
@keyframes logoGlowPulse {
  0%, 100% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 18px rgba(10,132,255,0.25))
            drop-shadow(0 0 36px rgba(10,132,255,0.08));
  }
  50% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 30px rgba(94,170,255,0.5))
            drop-shadow(0 0 56px rgba(10,132,255,0.22));
  }
}

/* هنگام هاور: نور قوی‌تر و ثابت (دود خودش نور رو زیاد می‌کنه) */
.logo-wrap.is-hovering .logo-img {
  animation-play-state: paused;
  filter: brightness(0) invert(1)
          drop-shadow(0 0 40px rgba(140,200,255,0.85))
          drop-shadow(0 0 80px rgba(10,132,255,0.4));
}

/* ═══ لایه دود ═══
   پشت لوگو قرار دارد و با موس حرکت می‌کند (parallax) */
.smoke-layer {
  position: absolute;
  inset: -60% -40%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  /* transform با JS ست می‌شود (transform: translate(--mx,--my)) */
}

/* حباب‌های دود — هر کدوم رنگ و حرکت ambient خودشون رو دارن */
.smoke-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(42px);
  mix-blend-mode: screen;
  opacity: 0.6;
  transition: opacity 0.6s ease, filter 0.6s ease;
}

.smoke-1 {
  width: 240px; height: 240px;
  top: 4%; left: 8%;
  background: radial-gradient(circle, rgba(94,170,255,0.55), transparent 70%);
  animation: smokeDrift1 11s ease-in-out infinite;
}
.smoke-2 {
  width: 200px; height: 200px;
  bottom: 8%; right: 10%;
  background: radial-gradient(circle, rgba(10,132,255,0.5), transparent 70%);
  animation: smokeDrift2 14s ease-in-out infinite;
}
.smoke-3 {
  width: 180px; height: 180px;
  top: 32%; right: 2%;
  background: radial-gradient(circle, rgba(170,215,255,0.45), transparent 70%);
  animation: smokeDrift3 17s ease-in-out infinite;
}

/* حرکت آرام و ابری هر حباب — هر کدوم مسیر/زمان متفاوت */
@keyframes smokeDrift1 {
  0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
  33%       { transform: translate(26px,-18px) scale(1.15) rotate(20deg); }
  66%       { transform: translate(-14px,14px) scale(0.95) rotate(-12deg); }
}
@keyframes smokeDrift2 {
  0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
  40%       { transform: translate(-22px,-20px) scale(1.1) rotate(-18deg); }
  75%       { transform: translate(18px,10px) scale(0.92) rotate(10deg); }
}
@keyframes smokeDrift3 {
  0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
  50%       { transform: translate(-16px,22px) scale(1.18) rotate(16deg); }
}

/* در حالت هاور: حباب‌ها روشن‌تر و واضح‌تر می‌شوند */
.logo-wrap.is-hovering .smoke-blob {
  opacity: 0.9;
  filter: blur(50px);
}

/* ═══ نقطه نور زیر موس — "بک‌لایت" واقعی ═══ */
.smoke-cursor {
  position: absolute;
  width: 220px;
  height: 220px;
  left: 0; top: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,215,255,0.65), transparent 70%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
}

.logo-wrap.is-hovering .smoke-cursor {
  opacity: 1;
}

/* ─── موبایل: سایز کوچک‌تر + دود خفیف‌تر برای عملکرد بهتر ─── */
@media (max-width: 600px) {
  .logo-img { height: 170px; }
  .logo-wrap { padding: 40px 30px; }
  .smoke-blob { filter: blur(28px); }
}





    /* بج "آماده همکاری" */
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 16px;
      border-radius: 40px;
      font-size: 13px;
      font-weight: 500;
      background: rgba(10,132,255,0.13);
      border: 1px solid rgba(10,132,255,0.28);
      color: var(--accent-text);
      margin-bottom: 20px;
    }

    /* نام و تخصص */
    .hero-name {
      font-size: clamp(17px, 2.5vw, 24px);
      font-weight: 600;
      color: var(--text);
      margin-bottom: 28px;
      letter-spacing: 0.5px;
    }

    .hero-description {
      font-size: clamp(15px, 2.2vw, 20px);
      color: var(--text-dim);
      margin-bottom: 36px;
      font-weight: 300;
      line-height: 1.7;
    }

    /* نوار تخصص چرخشی */
    .specialty-bar {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 11px 20px;
      border-radius: 40px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      backdrop-filter: var(--blur);
      margin-bottom: 40px;
      font-size: 16px;
      font-weight: 500;
    }

    #specialty-text { transition: opacity 0.3s, transform 0.3s; }

    .specialty-dots { display: flex; gap: 5px; align-items: center; }
    .spec-dot {
      width: 6px; height: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,0.22);
      cursor: pointer;
      transition: all 0.3s;
    }
    .spec-dot.active {
      background: var(--accent);
      width: 18px;
    }

    .hero-buttons {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* آمار */
    .stats-row {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-top: 56px;
      flex-wrap: wrap;
      width: 100%;
      max-width: 860px;
    }

    .stat-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 28px;
      border-radius: var(--radius);
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      flex: 1;
      min-width: 110px;
      max-width: 160px;
      transition: all 0.3s;
    }
    .stat-card:hover {
      background: var(--glass-hover);
      transform: translateY(-3px);
      border-color: rgba(10,132,255,0.25);
    }
    .stat-number { font-size: 32px; font-weight: 800; }
    .stat-label  { font-size: 11px; color: var(--text-dim); margin-top: 4px; text-align: center; }

    /* کارت‌های خدمات (خانه) */
    .services-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 52px;
      width: 100%;
      max-width: 860px;
    }

    .service-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 26px 16px;
      border-radius: var(--radius-lg);
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
    }
    .service-card:hover {
      background: var(--glass-hover);
      transform: translateY(-5px);
      border-color: rgba(10,132,255,0.28);
      box-shadow: 0 12px 36px rgba(10,132,255,0.14);
    }
    .service-card .svc-icon  { font-size: 30px; }
    .service-card .svc-title { font-size: 13.5px; font-weight: 600; }
    .service-card .svc-desc  { font-size: 11px; color: var(--text-dim); line-height: 1.5; }

    @media (max-width: 600px) {
      .services-row { grid-template-columns: repeat(2, 1fr); }
      .stats-row    { gap: 8px; }
    }

    /* ══════════════════════════════════════════════
       🎬 صفحه نمونه کار (Portfolio Page)
       ══════════════════════════════════════════════ */

    /* نوار فیلتر */
    .filter-bar {
      display: flex;
      gap: 7px;
      justify-content: center;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    .filter-btn {
      padding: 8px 18px;
      border-radius: 40px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      border: 1px solid var(--glass-border);
      background: var(--glass);
      color: var(--text-dim);
      font-family: 'Vazirmatn', sans-serif;
      backdrop-filter: var(--blur);
    }
    .filter-btn:hover, .filter-btn.active {
      background: rgba(10,132,255,0.18);
      border-color: rgba(10,132,255,0.38);
      color: var(--accent-text);
    }

    /* گرید نمونه کار */
    .works-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .work-card {
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      cursor: pointer;
      transition: all 0.32s;
    }
    .work-card:hover {
      transform: translateY(-7px);
      box-shadow: 0 20px 56px rgba(0,0,0,0.55);
      border-color: rgba(10,132,255,0.22);
    }
    .work-card:nth-child(1) { grid-column: span 2; }

    .work-thumbnail {
      width: 100%;
      aspect-ratio: 16/9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 44px;
      position: relative;
      overflow: hidden;
    }
    .work-card:nth-child(1) .work-thumbnail { aspect-ratio: 21/9; }

    /* گرادیان روی تامبنیل */
    .work-thumbnail::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(8,8,16,0.85) 0%, transparent 55%);
    }

    /* رنگ‌های پس‌زمینه تامبنیل */
    .thumb-motion  { background: linear-gradient(135deg, rgba(10,132,255,.2),  rgba(10,132,255,.08)); }
    .thumb-photo   { background: linear-gradient(135deg, rgba(10,132,255,.18), rgba(48,209,88,.12)); }
    .thumb-video   { background: linear-gradient(135deg, rgba(255,69,58,.12),  rgba(10,132,255,.18)); }
    .thumb-film    { background: linear-gradient(135deg, rgba(255,159,10,.15), rgba(255,69,58,.12)); }

    .work-info { padding: 14px 18px; }
    .work-category { font-size: 10px; color: var(--accent-text); font-weight: 700; letter-spacing: .8px; margin-bottom: 5px; }
    .work-title    { font-size: 15.5px; font-weight: 700; }
    .work-desc     { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }

    @media (max-width: 768px) {
      .works-grid { grid-template-columns: 1fr; }
      .work-card:nth-child(1) { grid-column: 1; }
    }

    /* ══════════════════════════════════════════════
       💰 صفحه تعرفه (Pricing Page)
       ══════════════════════════════════════════════ */
    .pricing-note-wrap { text-align: center; margin-bottom: 16px; }
    .pricing-note {
      display: inline-block;
      padding: 12px 24px;
      border-radius: var(--radius);
      font-size: 14px;
      color: var(--text-dim);
      background: rgba(255,159,10,0.08);
      border: 1px solid rgba(255,159,10,0.18);
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    /* کارت پایه تعرفه */
    .price-card {
      border-radius: var(--radius-lg);
      padding: 30px 26px;
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      transition: all 0.32s;
      position: relative;
      overflow: hidden;
    }
    .price-card:hover { transform: translateY(-8px); box-shadow: 0 22px 64px rgba(0,0,0,0.5); }

    /* پلن پرفروش (آبی) */
    .price-card.featured {
      background: rgba(10,132,255,0.1);
      border-color: rgba(10,132,255,0.32);
    }
    .price-card.featured::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--accent), #34AADC);
    }

    /* ✨ پلن ویژه (طلایی) */
    .price-card.gold {
      background: linear-gradient(160deg, rgba(200,168,75,0.09) 0%, var(--glass) 60%);
      border-color: rgba(200,168,75,0.3);
    }
    .price-card.gold::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
    }
    .price-card.gold .price-amount { color: var(--gold-light); }
    .price-card.gold .gold-badge {
      display: inline-flex;
      padding: 4px 12px;
      border-radius: 40px;
      font-size: 11px;
      font-weight: 600;
      background: rgba(200,168,75,0.18);
      border: 1px solid rgba(200,168,75,0.32);
      color: var(--gold-light);
      margin-bottom: 18px;
    }

    .plan-tier    { padding: 10px 0; font-size: 12px; font-weight: 600; color: var(--text-faint); letter-spacing: .5px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 12px; }
    .plan-badge   { display: inline-flex; padding: 4px 12px; border-radius: 40px; font-size: 11px; font-weight: 600; background: rgba(10,132,255,.22); border: 1px solid rgba(10,132,255,.38); color: var(--accent-text); margin-bottom: 18px; }
    .plan-name    { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
    .plan-desc    { font-size: 13px; color: var(--text-dim); margin-bottom: 22px; line-height: 1.65; }
    .price-amount { font-size: 36px; font-weight: 900; margin-bottom: 2px; }
    .price-amount sub { font-size: 14px; font-weight: 400; color: var(--text-dim); vertical-align: middle; }
    .price-per    { font-size: 12px; color: var(--text-faint); margin-bottom: 22px; }

    .feature-list { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 11px; }
    .feature-list li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-dim); }
    .feature-list li::before {
      content: '✓';
      width: 19px; height: 19px;
      flex-shrink: 0;
      background: rgba(48,209,88,.18);
      color: #30D158;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      line-height: 19px;
      text-align: center;
    }
    .feature-list li.no { opacity: .4; }
    .feature-list li.no::before { content: '✕'; background: rgba(255,69,58,.1); color: #FF453A; }

    @media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } }

    /* ══════════════════════════════════════════════
       👤 صفحه درباره من (About Page)
       ══════════════════════════════════════════════ */
    .about-layout {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 24px;
      align-items: start;
    }

    .about-sidebar {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: sticky;
      top: 90px;
    }

    .profile-card {
      border-radius: var(--radius-lg);
      padding: 28px 22px;
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      text-align: center;
    }

    .profile-avatar {
      width: 90px; height: 90px;
      border-radius: 50%;
      margin: 0 auto 14px;
      background: linear-gradient(135deg, rgba(10,132,255,.28), rgba(10,132,255,.15));
      border: 2px solid rgba(10,132,255,.38);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
    }

    .profile-name { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
    .profile-role { font-size: 12.5px; color: var(--accent-text); font-weight: 500; margin-bottom: 16px; }
    .profile-divider { height: 1px; background: rgba(255,255,255,.07); margin: 14px 0; }

    .info-table { border-radius: var(--radius); padding: 14px 18px; background: var(--glass); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); }
    .info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; }
    .info-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.05); }
    .info-row .key { color: var(--text-dim); }
    .info-row .val { font-weight: 500; }

    .status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #30D158; font-weight: 600; }
    .status-dot::before { content: ''; width: 7px; height: 7px; background: #30D158; border-radius: 50%; animation: pulseDot 2s infinite; }

    .about-content { display: flex; flex-direction: column; gap: 18px; }

    .content-card {
      border-radius: var(--radius-lg);
      padding: 26px;
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
    }

    .card-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .card-body  { font-size: 14.5px; color: var(--text-dim); line-height: 1.9; font-weight: 300; }

    /* تگ مهارت‌ها */
    .skills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
    .skill-tag {
      padding: 7px 14px;
      border-radius: 40px;
      font-size: 12.5px;
      font-weight: 500;
      background: rgba(10,132,255,.1);
      border: 1px solid rgba(10,132,255,.22);
      color: var(--accent-text);
      transition: all .25s;
      cursor: default;
    }
    .skill-tag:hover { background: rgba(10,132,255,.2); transform: translateY(-2px); }

    /* تایم‌لاین */
    .timeline { display: flex; flex-direction: column; }
    .timeline-item { display: flex; gap: 16px; padding-bottom: 22px; position: relative; }
    .timeline-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 15px; top: 34px; bottom: 0;
      width: 1px;
      background: rgba(255,255,255,.08);
    }
    .timeline-dot {
      width: 32px; height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      background: rgba(10,132,255,.18);
      border: 1px solid rgba(10,132,255,.36);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }
    .timeline-year  { font-size: 11px; color: var(--accent-text); font-weight: 600; margin-bottom: 3px; }
    .timeline-title { font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
    .timeline-desc  { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

    @media (max-width: 768px) {
      .about-layout  { grid-template-columns: 1fr; }
      .about-sidebar { position: static; }
    }

    /* ══════════════════════════════════════════════
       📞 صفحه تماس (Contact Page)
       ══════════════════════════════════════════════ */
    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      align-items: start;
    }

    .contact-info-col { display: flex; flex-direction: column; gap: 13px; }
    .contact-intro { font-size: 14.5px; color: var(--text-dim); line-height: 1.85; font-weight: 300; margin-bottom: 8px; }

    .contact-link {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      border-radius: var(--radius);
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      text-decoration: none;
      color: var(--text);
      transition: all 0.28s;
    }
    .contact-link:hover {
      background: var(--glass-hover);
      transform: translateX(4px);
      border-color: rgba(10,132,255,.28);
    }

    .contact-icon {
      width: 42px; height: 42px;
      border-radius: 11px;
      flex-shrink: 0;
      background: rgba(10,132,255,.14);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .contact-label { font-size: 11px; color: var(--text-faint); margin-bottom: 2px; }
    .contact-value { font-size: 13.5px; font-weight: 500; }

    /* شبکه‌های اجتماعی */
    .social-section-title { font-size: 13px; color: var(--text-dim); margin-top: 4px; font-weight: 500; }

    .social-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-top: 4px;
    }

    .social-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 14px 6px;
      border-radius: var(--radius);
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      cursor: pointer;
      transition: all 0.28s;
      text-decoration: none;
      color: var(--text-dim);
      font-size: 11px;
      font-weight: 500;
    }
    .social-btn:hover {
      background: rgba(10,132,255,.14);
      border-color: rgba(10,132,255,.28);
      color: var(--accent-text);
      transform: translateY(-3px);
    }
    .social-btn .social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px; height: 24px;
    }

    /* فرم تماس */
    .contact-form-wrap {
      border-radius: var(--radius-lg);
      padding: 28px;
      background: var(--glass);
      backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
    }

    .form-group { margin-bottom: 14px; }
    .form-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-dim); margin-bottom: 7px; }

    .form-input, .form-textarea {
      width: 100%;
      padding: 13px 15px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,.04);
      border: 1px solid var(--glass-border);
      color: var(--text);
      font-family: 'Vazirmatn', sans-serif;
      font-size: 13.5px;
      transition: all .28s;
      outline: none;
    }
    .form-input:focus, .form-textarea:focus {
      border-color: rgba(10,132,255,.48);
      background: rgba(10,132,255,.04);
      box-shadow: 0 0 0 3px rgba(10,132,255,.1);
    }
    .form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
    .form-textarea { resize: none; height: 120px; line-height: 1.65; }

    .form-success {
      display: none;
      text-align: center;
      padding: 14px;
      border-radius: var(--radius);
      background: rgba(48,209,88,.12);
      border: 1px solid rgba(48,209,88,.25);
      color: #30D158;
      font-size: 14px;
      font-weight: 500;
      margin-top: 12px;
    }

    .form-note { font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 10px; }

    @media (max-width: 768px) {
      .contact-layout { grid-template-columns: 1fr; }
      .social-grid    { grid-template-columns: repeat(2, 1fr); }
    }


    /* ══════════════════════════════════════════════
       ⚡ صفحه مهارت‌ها — اوربیتال اینتراکتیو
       ══════════════════════════════════════════════ */

    /* صفحه مهارت‌ها */
    #page-skills {
      display: none;
      flex-direction: column;
      align-items: center;
      padding-top: 80px;
    }
    #page-skills.active { display: flex; }

    .skills-page-header { text-align: center; margin-bottom: 28px; }
    .skills-hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

    /* صحنه اوربیتال */
    .orbital-scene {
      position: relative;
      width: 460px;
      height: 460px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* حلقه مداری */
    .orbital-ring {
      position: absolute;
      width: 390px;
      height: 390px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.09);
      pointer-events: none;
    }

    /* مرکز درخشان */
    .orbital-center {
      position: absolute;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, #9999FF, #0A84FF, #30D158);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      animation: cPulse 2.5s ease-in-out infinite;
      cursor: default;
    }
    @keyframes cPulse {
      0%, 100% { box-shadow: 0 0 18px rgba(10,132,255,0.4); }
      50%       { box-shadow: 0 0 38px rgba(10,132,255,0.7); }
    }

    .c-ping {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      animation: cPing 2s ease-out infinite;
    }
    .c-ping-1 { width: 80px;  height: 80px; }
    .c-ping-2 { width: 96px;  height: 96px;  animation-delay: 0.6s; opacity: 0.6; }

    @keyframes cPing {
      0%   { opacity: 0.8; transform: scale(1); }
      100% { opacity: 0;   transform: scale(1.35); }
    }

    .c-core {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(8px);
    }

    /* نودهای مهارت */
    .orbital-node {
      position: absolute;
      left: 50%; top: 50%;
      margin-left: -22px;
      margin-top: -22px;
      cursor: pointer;
      will-change: transform;
    }

    .orbital-node-btn {
      width: 44px; height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12.5px;
      font-weight: 800;
      border: 2px solid transparent;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
      font-family: 'Arial', sans-serif;
      letter-spacing: -0.5px;
    }

    .orbital-node.active-node .orbital-node-btn {
      transform: scale(1.55);
      box-shadow: 0 0 22px var(--node-color, #fff);
    }

    .orbital-node-label {
      position: absolute;
      top: 52px;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 9.5px;
      font-weight: 600;
      color: rgba(255,255,255,0.65);
      transition: all 0.3s;
      text-align: center;
      pointer-events: none;
    }
    .orbital-node.active-node .orbital-node-label {
      color: #fff;
      transform: translateX(-50%) scale(1.15);
    }

    .orbital-node-glow {
      position: absolute;
      width: 60px; height: 60px;
      top: -8px; left: -8px;
      border-radius: 50%;
      pointer-events: none;
    }

    /* پانل جزئیات مهارت */
    /* ── لایه‌بندی اصلی (ستون) ── */
    .skills-main-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 24px;
      transition: gap 0.5s ease;
    }

    /* ── وقتی یک مهارت انتخاب شده → ردیف ── */
    .skills-main-wrap.has-detail {
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 48px;
      direction: ltr;   /* orbital چپ، detail راست */
    }

    /* ── پانل جزئیات ── */
    .skill-detail-panel {
      width: 300px;
      flex-shrink: 0;
      direction: rtl;
    }
    .skill-detail-panel.hidden  { display: none; }
    .skill-detail-panel.visible { display: block; animation: detailSlideIn 0.4s ease; }

    @keyframes detailSlideIn {
      from { opacity: 0; transform: translateX(24px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* ── ریسپانسیو: موبایل → دوباره ستونی ── */
    @media (max-width: 768px) {
      .skills-main-wrap.has-detail {
        flex-direction: column;
        gap: 20px;
        direction: rtl;
      }
      .skill-detail-panel { width: 100%; max-width: 400px; }
    }

    .skill-detail-card {
      background: var(--glass);
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 24px;
      animation: detailIn 0.3s ease;
    }
    @keyframes detailIn {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .skill-detail-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }

    .skill-adobe-icon {
      width: 52px; height: 52px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 900;
      font-family: 'Arial', sans-serif;
      flex-shrink: 0;
      letter-spacing: -0.5px;
    }

    .skill-detail-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
    .skill-detail-years { font-size: 12px; color: var(--text-dim); }

    .skill-close-btn {
      margin-right: auto;
      background: none;
      border: 1px solid var(--glass-border);
      color: var(--text-dim);
      width: 32px; height: 32px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .skill-close-btn:hover { border-color: var(--accent); color: var(--text); }

    .skill-desc {
      font-size: 14px;
      color: var(--text-dim);
      line-height: 1.75;
      margin-bottom: 20px;
      font-weight: 300;
    }

    .skill-level-labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-dim);
      margin-bottom: 8px;
    }
    .skill-level-track {
      width: 100%;
      height: 6px;
      background: rgba(255,255,255,0.08);
      border-radius: 3px;
      overflow: hidden;
    }
    .skill-level-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.9s cubic-bezier(0.34,1.56,0.64,1);
    }

    /* ریسپانسیو */
    @media (max-width: 500px) {
      .orbital-scene  { width: 330px; height: 330px; }
      .orbital-ring   { width: 280px; height: 280px; }
      .skill-detail-panel { max-width: 100%; }
    }

    /* دکمه دانلود رزومه */
    .resume-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 14px;
      padding: 10px 16px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-text);
      background: rgba(10,132,255,0.1);
      border: 1px solid rgba(10,132,255,0.3);
      text-decoration: none;
      transition: all 0.3s;
      font-family: 'Vazirmatn', sans-serif;
    }
    .resume-btn:hover {
      background: rgba(10,132,255,0.2);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(10,132,255,0.2);
    }

    /* ══ تنظیمات WordPress ══ */
    .page-wrap {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      padding: 90px 20px 110px;
    }

    .home-page {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 70px;
    }

    /* ناوبار: a به جای button */
    .navbar .nav-item {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    .tab-bar .tab-item {
      text-decoration: none;
      display: flex;
    }

    /* service-card به صورت لینک */
    a.service-card { text-decoration: none; }

    

/* ══════════════════════════════════════════════
       ⚡ مهارت‌ها — Radial Orbital Timeline
       منطبق دقیق با React RadialOrbitalTimeline
       ══════════════════════════════════════════════ */

    #page-skills {
      display: none;
      flex-direction: column;
      align-items: center;
      padding: 80px 20px 0;
    }
    #page-skills.active { display: flex; }
    #page-skills .page-header { margin-bottom: 8px; }
    .skills-hint { font-size:12px; color:var(--text-faint); margin-top:4px; }

    /* ── w-full h-screen flex items-center justify-center overflow-hidden ── */
    .orbital-container {
      width: 100%;
      height: calc(100vh - 230px);
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: default;
    }

    /* ── relative w-full max-w-4xl h-full flex items-center justify-center ── */
    .orbital-wrap {
      position: relative;
      width: 100%;
      max-width: 900px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── w-16 h-16 rounded-full gradient animate-pulse ── */
    .orb-center {
      position: absolute;
      width: 64px; height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, #a855f7, #3b82f6, #14b8a6);
      display: flex; align-items: center; justify-content: center;
      z-index: 10;
      animation: orbCenterPulse 2s ease-in-out infinite;
    }
    @keyframes orbCenterPulse {
      0%,100% { opacity:1; }
      50%      { opacity:0.82; }
    }

    /* ── animate-ping rings ── */
    .orb-ping {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.2);
      animation: orbPingKf 2s ease-out infinite;
    }
    .orb-ping-1 { width:80px; height:80px; }
    .orb-ping-2 { width:96px; height:96px; opacity:.5; animation-delay:.5s; }
    @keyframes orbPingKf {
      0%   { transform:scale(1);   opacity:.7; }
      100% { transform:scale(1.3); opacity:0;  }
    }

    /* ── w-8 h-8 bg-white/80 ── */
    .orb-white-core {
      width:32px; height:32px;
      border-radius:50%;
      background:rgba(255,255,255,0.82);
      backdrop-filter:blur(4px);
    }

    /* ── w-96 h-96 border border-white/10 ── */
    .orb-ring {
      position: absolute;
      width: 400px; height: 400px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.1);
      pointer-events: none;
    }

    /* ── Node container ── */
    .orb-node {
      position: absolute;
      left: 50%; top: 50%;
      margin-left: -20px; margin-top: -20px;
      cursor: pointer;
      transition: all 0.7s ease;
      will-change: transform;
    }

    /* Energy glow — radius/size set by JS from item.energy */
    .orb-node-glow {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    }
    .orb-node-glow.pulsing { animation: glowPulse 1s ease-in-out infinite; }
    @keyframes glowPulse {
      0%,100% { opacity:1; }
      50%      { opacity:0.5; }
    }

    /* ── w-10 h-10 rounded-full ── */
    .orb-node-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      position: relative; z-index: 2;
    }

    /* bg-black text-white border-white/40 */
    .orb-node-btn.st-normal {
      background: #000000;
      color: #ffffff;
      border-color: rgba(255,255,255,0.4);
    }

    /* bg-white/50 text-black border-white animate-pulse */
    .orb-node-btn.st-related {
      background: rgba(255,255,255,0.5);
      color: #000000;
      border-color: #ffffff;
      animation: relatedPulse 1s ease-in-out infinite;
    }
    @keyframes relatedPulse { 0%,100%{opacity:1} 50%{opacity:.5} }

    /* bg-white text-black border-white scale-150 shadow-lg shadow-white/30 */
    .orb-node-btn.st-expanded {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
      box-shadow: 0 0 20px rgba(255,255,255,0.3);
      transform: scale(1.5);
    }

    /* Node label */
    .orb-node-label {
      position: absolute;
      top: 52px; left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.07em;
      color: rgba(255,255,255,0.7);
      transition: all 0.3s;
      pointer-events: none;
      text-align: center;
    }
    .orb-node.is-expanded .orb-node-label {
      color: #fff;
      transform: translateX(-50%) scale(1.25);
    }

    /* ── Floating card — top-20 left-1/2 -translate-x-1/2 w-64 ── */
    .orb-card {
      position: absolute;
      top: 76px;
      left: 50%;
      transform: translateX(-50%);
      width: 256px;
      background: rgba(0,0,0,0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 20px 40px rgba(255,255,255,0.08);
      border-radius: 8px;
      overflow: visible;
      z-index: 300;
      direction: ltr;
      animation: cardIn 0.25s ease;
    }
    @keyframes cardIn {
      from { opacity:0; transform:translateX(-50%) translateY(8px); }
      to   { opacity:1; transform:translateX(-50%) translateY(0); }
    }

    /* خط اتصال بین نود و کارت */
    .orb-card-conn {
      position: absolute;
      top: -12px; left: 50%;
      transform: translateX(-50%);
      width: 1px; height: 12px;
      background: rgba(255,255,255,0.5);
    }

    .orb-card-hdr     { padding: 12px 16px 6px; }
    .orb-card-body    { padding: 0 16px 14px; font-size: 11px; color: rgba(255,255,255,0.8); }
    .orb-card-meta    { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
    .orb-card-date    { font-size:10px; color:rgba(255,255,255,0.5); font-family:monospace; }
    .orb-card-title   { font-size:13px; font-weight:600; color:#fff; margin-top:4px; }
    .orb-card-content { line-height:1.55; margin-bottom:10px; }

    /* Status badge */
    .orb-badge {
      display:inline-flex; align-items:center;
      padding:2px 8px; border-radius:4px;
      font-size:10px; font-weight:600; letter-spacing:.05em;
      border:1px solid;
    }
    .orb-badge.completed   { background:#000; color:#fff; border-color:#fff; }
    .orb-badge.in-progress { background:#fff; color:#000; border-color:#000; }
    .orb-badge.pending     { background:rgba(0,0,0,.4); color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.5); }

    /* Energy bar */
    .orb-energy-sec  { margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); }
    .orb-energy-row  { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; font-size:10px; }
    .orb-energy-lbl  { display:flex; align-items:center; gap:4px; color:rgba(255,255,255,.7); }
    .orb-energy-trk  { width:100%; height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
    .orb-energy-fill { height:100%; background:linear-gradient(90deg,#3b82f6,#a855f7); border-radius:2px; transition:width .8s ease; }

    /* Related nodes */
    .orb-rel-sec   { margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1); }
    .orb-rel-hdr   { display:flex; align-items:center; gap:4px; font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.7); margin-bottom:6px; text-transform:uppercase; }
    .orb-rel-btns  { display:flex; flex-wrap:wrap; gap:4px; }
    .orb-rel-btn   {
      display:inline-flex; align-items:center; gap:4px;
      height:24px; padding:0 8px;
      font-size:10px; color:rgba(255,255,255,.8);
      background:transparent; border:1px solid rgba(255,255,255,.2);
      border-radius:0; cursor:pointer;
      transition:all .2s; font-family:'Vazirmatn',sans-serif;
    }
    .orb-rel-btn:hover { background:rgba(255,255,255,.1); color:#fff; }

    @media (max-width:500px) {
      .orb-ring { width:280px; height:280px; }
/* ═══════════════════════════════════════════════════
   📱 بهینه‌سازی موبایل
   این بلوک را در انتهای فایل assets/css/main.css اضافه کن
   ═══════════════════════════════════════════════════ */

/* ── جلوگیری از اسکرول افقی در کل سایت (ایمنی) ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ─────────────────────────────────────────────
   🔼 منظومه مهارت‌ها — قابل تنظیم
   با تغییر --orbital-offset منظومه بالا/پایین می‌رود
   عدد منفی = بالاتر | عدد مثبت = پایین‌تر
───────────────────────────────────────────── */
.orbital-wrap {
  transform: translateY(var(--orbital-offset, 0px));
}


@media (max-width: 768px) {

  /* ══ ۱) رفع اسکرول افقی لوگو ══ */
  .hlogo-wrap {
    padding: 20px 10px;   /* قبلاً 40px 30px بود */
  }
  .hlogo-img {
    height: 150px;                 /* ✏️ سایز لوگو در موبایل */
    max-width: calc(100vw - 40px); /* هیچ‌وقت از عرض گوشی بیرون نمی‌زند */
  }


  /* ══ ۲) بالا آمدن محتوای همه صفحات ══ */
  .page-wrap {
    padding-top: 20px;    /* قبلاً 90px بود */
    padding-bottom: 90px; /* فضای کافی برای تب‌بار پایین */
  }
  .home-page {
    padding-top: 10px;    /* قبلاً 70px بود */
  }
  .hero-section {
    padding-top: 0;
  }
  .page-header {
    margin-bottom: 26px;  /* قبلاً 44px بود */
  }


  /* ══ ۳) آمار صفحه خانه — جلوگیری از سرریز افقی ══ */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 36px;
  }
  .stat-card {
    flex: none;
    min-width: 0;
    max-width: none;
    padding: 16px 10px;
  }


  /* ══ ۴) صفحه مهارت‌ها — آمدن منظومه به بالا ══ */
  .skills-page {
    padding: 50px 16px 16px;
  }
  .skills-page .page-header {
    margin-bottom: 4px;
  }
  .skills-page .page-title {
    font-size: 26px;
    margin-bottom: 2px;
  }
  .skills-hint {
    font-size: 11px;
  }

  .orbital-container {
    height: calc(100vh - 190px);
    min-height: 380px;
  }

  /* ─────────────────────────────────────────
     ✏️ تنظیم نهایی موقعیت منظومه در موبایل
     عدد منفی بزرگ‌تر = منظومه بالاتر می‌رود
     مثال‌ها: -10px کم | -40px زیاد
  ───────────────────────────────────────── */
  .orbital-container {
    --orbital-offset: -120px;
  }

}


/* ── گوشی‌های خیلی کوچک (زیر 380px) ── */
@media (max-width: 380px) {
  .hlogo-img {
    height: 120px;
  }
  .stats-row {
    gap: 6px;
  }
  .stat-card {
    padding: 12px 8px;
  }
  .stat-number {
    font-size: 26px;
  }
  .orbital-container {
    --orbital-offset: -35px;
    min-height: 340px;
  }
  /* ═══════════════════════════════════════════════════
   🌀 اسپینر مرکز منظومه مهارت‌ها
   این بلوک را در انتهای main.css اضافه کن
═══════════════════════════════════════════════════ */

/* اجازه می‌دهد حلقه اسپینر از کادر 64px بیرون بزند */
.orb-center {
  overflow: visible;
}

/* حلقه پروانه‌ای — با کلیک می‌چرخد */
.orb-spin-ring {
  position: absolute;
  inset: -18px;              /* بزرگ‌تر از مرکز سفید */
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.25;
  filter: blur(2px);
  will-change: transform, opacity;

  /* پروانه ۳پر آبی با فاصله شفاف */
  background: conic-gradient(
    from 0deg,
    rgba(120,190,255,0.95)  0deg   18deg,
    transparent             18deg  120deg,
    rgba(120,190,255,0.95)  120deg 138deg,
    transparent             138deg 240deg,
    rgba(120,190,255,0.95)  240deg 258deg,
    transparent             258deg 360deg
  );
}

/* وقتی سرعت بالاست — درخشش بیشتر هسته سفید */
.orb-center.is-spinning .orb-white-core {
  box-shadow: 0 0 24px 6px rgba(120,190,255,0.55);
}

/* فیدبک لمسی هنگام کلیک */
.orb-center:active .orb-white-core {
  transform: scale(0.9);
  transition: transform 0.1s ease;
}


/* ═══════════════════════════════════════════════════
   🔼 موقعیت منظومه — دسکتاپ
   عدد منفی بزرگ‌تر = منظومه بالاتر می‌رود
═══════════════════════════════════════════════════ */
.orbital-container {
  --orbital-offset: -50px;   /* ✏️ دسکتاپ */
}


/* ═══════════════════════════════════════════════════
   📱 موبایل — بالاتر آمدن بیشتر محتوای صفحات
   این مقادیر را به‌جای مقادیر قبلی (در مرحله قبل) بگذار
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .page-wrap {
    padding-top: 46px;     /* قبلاً 64px */
    padding-bottom: 90px;
  }
  .home-page {
    padding-top: 16px;     /* قبلاً 44px */
  }
  .page-header {
    margin-bottom: 18px;   /* قبلاً 26px */
  }

  /* صفحه مهارت‌ها */
  .skills-page {
    padding: 36px 16px 16px;  /* قبلاً 50px */
  }
  .skills-page .page-header {
    margin-bottom: 2px;
  }

  .orbital-container {
    --orbital-offset: -30px;   /* ✏️ موبایل */
    height: calc(100vh - 170px);
    min-height: 360px;
  }
}

@media (max-width: 380px) {
  .orbital-container {
    --orbital-offset: -40px;
    min-height: 320px;
  }
}
}