/* -------------------------------------------------------------
   V2 – Base Theme for {{ config('app.name') }}
   Brand: #17AAE2 (primary), #ffb202 (accent), #111 / #2b2b2b (dark)
-------------------------------------------------------------- */

  /*--------------------------------------------------------------
  # Root tokens
  --------------------------------------------------------------*/
  :root {
    --brand-primary: #17AAE2;
    --brand-primary-dark: #0f7ca7;
    --brand-accent: #ffb202;
    --brand-dark: #111111;
    --brand-text: #333333;
    --brand-muted: #777777;
    --brand-bg: #f4f6f8;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-pill: 999px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-strong: 0 18px 45px rgba(0, 0, 0, 0.16);
    --transition-fast: 0.2s ease-out;
    --transition-normal: 0.3s ease;
  }

  /*--------------------------------------------------------------
  # Global
  --------------------------------------------------------------*/
  html {
    scroll-behavior: smooth;
  }
/* ===========================
   Base
   =========================== */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }

   html,
   body {
     margin: 0;
     padding: 0;
     direction: rtl;
     text-align: right;
     font-family: "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont,
     "Segoe UI", sans-serif !important;
     background: radial-gradient(circle at top, #0b152b 0, #020617 40%, #020617 100%);
     color: #e5e7eb;
   }

   /* لینک‌ها */
   a {
     text-decoration: none;
   }

/* نوار کوچک ورود */
.loggedin {
    position: fixed;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 1100;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 178, 2, 0.96);
    color: #111827;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.55);
  }

  .loggedin h6 {
    font-size: 0.78rem;
    font-weight: 600;
  }

  /* ===========================
     Header / Navbar v2
     =========================== */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(18px);
  }

  .navbar-div {
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96));
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.75);
  }

  /* خود ناوبار */
  .main-navbar {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  /* لوگو */
  .logoimg {
    height: 42px;
    width: auto;
    display: block;
    background: #e5e7eb;
    padding: 6px;
    border-radius: 10px;
  }

  /* لینک‌ها */
  .main-navbar .nav-link {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    margin-inline: 0.15rem;
    color: #e5e7eb !important;
    transition:
      color 0.18s ease-out,
      opacity 0.18s ease-out,
      transform 0.15s ease-out;
  }

  .main-navbar .nav-link::after {
    content: "";
    position: absolute;
    inset-inline: 0.8rem;
    bottom: 0.1rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #17aae2, #ffb202);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition:
      opacity 0.18s ease-out,
      transform 0.18s ease-out;
  }

  .main-navbar .nav-link:hover {
    color: #f9fafb !important;
    transform: translateY(-1px);
  }

  .main-navbar .nav-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* اکتیو */
  .main-navbar .nav-link.active {
    color: #ffffff !important;
    font-weight: 600;
  }

  .main-navbar .nav-link.active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* داشبورد کمی برجسته‌تر */
  .nav-link-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding-inline: 0.9rem !important;
  }

  /* دکمه موبایل */
  .navbar-toggler {
    border: 1px solid rgba(148, 163, 184, 0.7);
    border-radius: 0.75rem;
    padding: 0.15rem 0.4rem;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(23, 170, 226, 0.4);
  }

  .navbar-toggler-icon {
    background-image: none;
    width: 1.35rem;
    height: 1.35rem;
    position: relative;
  }

  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after,
  .navbar-toggler-icon span {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 2px;
    border-radius: 999px;
    background: #e5e7eb;
  }

  .navbar-toggler-icon::before {
    top: 3px;
  }

  .navbar-toggler-icon::after {
    bottom: 3px;
  }

  .navbar-toggler-icon span {
    top: 50%;
    transform: translateY(-50%);
  }

  /* چون Bootstrap خودش span نمی‌سازه، ما یکی اضافه می‌کنیم با CSS */
  .navbar-toggler-icon span {
    display: block;
  }

  /* منوی دراپ‌داون */
  .dropdown-menu-dark {
    background: #020617;
    border-radius: 0.8rem;
    border: 1px solid rgba(148, 197, 255, 0.35);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.85);
    padding: 0.35rem;
    min-width: 190px;
  }

  .dropdown-menu-dark .dropdown-item {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.55rem;
    color: #e5e7eb;
  }

  .dropdown-menu-dark .dropdown-item:hover,
  .dropdown-menu-dark .dropdown-item:focus {
    background: linear-gradient(90deg, rgba(23, 170, 226, 0.18), rgba(255, 178, 2, 0.18));
    color: #ffffff;
  }

  /* موبایل */
  @media (max-width: 991.98px) {
    .main-navbar {
      padding-top: 0.45rem;
      padding-bottom: 0.45rem;
    }

    .main-navbar .navbar-collapse {
      padding-top: 0.6rem;
    }

    .main-navbar .nav-link {
      padding: 0.4rem 0.2rem;
    }

    .main-navbar .nav-link::after {
      inset-inline: 0.2rem;
    }

    .logoimg {
      height: 36px;
    }
  }





   .home-bg{
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    background: #FDD7C2;
  }

  .home-bg .img{
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    height: auto;
  }

  .home-bg .img img{
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    height: auto;
  }



  /* ===========================
   Fields section – Advanced
   =========================== */

.fields-section {
    position: relative;
    padding: 4rem 0 4.5rem;
    background: radial-gradient(circle at top, #0b152b 0, #050b18 45%, #02040a 100%);
    overflow: hidden;
  }

  /* لایه‌های نوری پس‌زمینه */
  .fields-section::before,
  .fields-section::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(40px);
    opacity: 0.4;
    pointer-events: none;
  }

  .fields-section::before {
    width: 380px;
    height: 380px;
    background: rgba(23, 170, 226, 0.26);
    inset-inline-start: -80px;
    top: -120px;
  }

  .fields-section::after {
    width: 260px;
    height: 260px;
    background: rgba(255, 178, 2, 0.3);
    inset-inline-end: -40px;
    bottom: -80px;
  }

  /* هدر سکشن */
  .fields-header {
    text-align: center;
    margin-bottom: 2.8rem;
    position: relative;
    z-index: 1;
    color: #e5f0ff;
  }

  .fields-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 197, 255, 0.3);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c6e2ff;
  }

  .fields-header h2 {
    margin-top: 0.9rem;
    margin-bottom: 0.4rem;
    font-family: "Vazirmatn", system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
  }

  .fields-header p {
    margin: 0;
    font-size: 0.9rem;
    color: #b5c6e3;
  }

  /* گرید کارت‌ها */
  .fields-grid {
    position: relative;
    z-index: 1;
  }

  /* کارت اصلی */
  .fields-card {
    position: relative;
    border-radius: 1.6rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(148, 197, 255, 0.35);
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.75);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    isolation: isolate;
    transition:
      transform 0.22s ease-out,
      box-shadow 0.22s ease-out,
      border-color 0.22s ease-out,
      background 0.22s ease-out;
  }

  .fields-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, #17aae2 0%, rgba(255, 178, 2, 0.9) 35%, transparent 75%);
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: -1;
  }

  .fields-card:hover {
    transform: translateY(-6px) translateZ(0);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 197, 255, 0.8);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(11, 36, 67, 0.98));
  }

  .fields-card:hover::before {
    opacity: 0.85;
  }

  /* مدیا (عکس) */
  .fields-card-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
  }

  .fields-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.4s ease-out;
  }

  .fields-card:hover .fields-card-media img {
    transform: scale(1.08);
  }

  /* محتوای کارت */
  .fields-card-body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: #d7e2ff;
  }

  /* بالای کارت: پِل */
  .fields-card-top {
    display: flex;
    justify-content: flex-start;
  }

  .fields-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: "Vazirmatn", system-ui, sans-serif;
    letter-spacing: 0.03em;
  }

  .fields-pill-primary {
    background: rgba(23, 170, 226, 0.16);
    color: #e3f4ff;
    border: 1px solid rgba(23, 170, 226, 0.7);
  }

  .fields-pill-info {
    background: rgba(56, 189, 248, 0.14);
    color: #e0f7ff;
    border: 1px solid rgba(56, 189, 248, 0.7);
  }

  .fields-pill-accent {
    background: rgba(255, 178, 2, 0.15);
    color: #fff5d9;
    border: 1px solid rgba(255, 178, 2, 0.8);
  }

  .fields-pill-outline {
    background: transparent;
    color: #e2ecff;
    border: 1px dashed rgba(148, 197, 255, 0.9);
  }

  /* متن توضیح */
  .fields-description {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.9;
    color: #d7e2ff ;
  }

  /* متای پایین کارت */
  .fields-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.35rem;
  }

  .fields-meta-label {
    font-size: 0.75rem;
    color: #9fb3d9;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* لینک بیشتر بدانید */
  .fields-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #17aae2;
    white-space: nowrap;
  }

  .fields-more-link i {
    font-size: 1rem;
    transform: translateX(0);
    transition: transform 0.18s ease-out;
  }

  .fields-card:hover .fields-more-link i {
    transform: translateX(-3px);
  }

  .fields-more-link:hover {
    color: #8bd6ff;
    text-decoration: none;
  }

  /* موبایل */
  @media (max-width: 767.98px) {
    .fields-section {
      padding: 3rem 0 3.5rem;
    }

    .fields-header h2 {
      font-size: 1.4rem;
    }

    .fields-header p {
      font-size: 0.82rem;
    }

    .fields-card-body {
      padding: 0.85rem 0.9rem 1.05rem;
    }

    .fields-description {
      font-size: 0.82rem;
    }

    .fields-meta {
      flex-direction: column;
      align-items: flex-start;
    }

    .fields-meta-label {
      max-width: 100%;
    }
  }


  /* ===========================
   Video Section – Mohsin v2
   =========================== */

.video-section {
    padding: 3.5rem 0 4rem;
    background: radial-gradient(circle at top, #0b152b 0, #050b18 45%, #02040a 100%);
    position: relative;
    overflow: hidden;
  }

  /* هاله‌های نوری پس‌زمینه (هماهنگ با سکشن قبلی) */
  .video-section::before,
  .video-section::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(40px);
    opacity: 0.35;
    pointer-events: none;
  }

  .video-section::before {
    width: 260px;
    height: 260px;
    background: rgba(23, 170, 226, 0.4);
    inset-inline-start: -60px;
    top: -40px;
  }

  .video-section::after {
    width: 220px;
    height: 220px;
    background: rgba(255, 178, 2, 0.32);
    inset-inline-end: -40px;
    bottom: -40px;
  }

  /* هدر سکشن */
  .video-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 2.4rem;
    color: #e5f0ff;
  }

  .video-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 197, 255, 0.4);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c6e2ff;
  }

  .video-header h2 {
    margin-top: 0.8rem;
    margin-bottom: 0.35rem;
    font-family: "Vazirmatn", system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
  }

  .video-header p {
    margin: 0;
    font-size: 0.88rem;
    color: #b5c6e3;
  }

  /* ویدیوی اصلی */
  .video-hero-wrapper {
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
  }

  .video-card-hero {
    border-radius: 1.6rem;
  }

  /* کارت ویدیو عمومی */
  .video-card {
    position: relative;
    border-radius: 1.4rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(11, 36, 67, 0.96));
    border: 1px solid rgba(148, 197, 255, 0.4);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.8);
    transition:
      transform 0.2s ease-out,
      box-shadow 0.2s ease-out,
      border-color 0.2s ease-out,
      background 0.2s ease-out;
  }

  .video-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 26px 52px rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 197, 255, 0.8);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(11, 43, 82, 0.98));
  }

  /* نسبت 16:9 */
  .video-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
  }

  .video-ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* موبایل */
  @media (max-width: 767.98px) {
    .video-section {
      padding: 3rem 0 3.5rem;
    }

    .video-header h2 {
      font-size: 1.35rem;
    }

    .video-header p {
      font-size: 0.82rem;
    }

    .video-card {
      border-radius: 1.2rem;
    }
  }


  /* ===========================
   Footer – Mohsin v2
   =========================== */

.footer {
    color: #e5e7eb;
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #020617;
  }

  /* بدنه اصلی فوتر */
  .footer-body {
    padding: 2.8rem 0 2.2rem;
    background: radial-gradient(circle at top, #0b152b 0, #020617 45%, #020617 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    position: relative;
    overflow: hidden;
  }

  /* افکت‌های نور پس‌زمینه */
  .footer-body::before,
  .footer-body::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(40px);
    opacity: 0.35;
    pointer-events: none;
  }

  .footer-body::before {
    width: 260px;
    height: 260px;
    background: rgba(23, 170, 226, 0.42);
    inset-inline-start: -70px;
    top: -80px;
  }

  .footer-body::after {
    width: 210px;
    height: 210px;
    background: rgba(255, 178, 2, 0.35);
    inset-inline-end: -50px;
    bottom: -60px;
  }

  /* هر سکشن داخل فوتر */
  .footer-section {
    position: relative;
    z-index: 1;
  }

  .footer-section-title {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
    color: #f9fafb;
    position: relative;
    padding-bottom: 0.4rem;
  }

  .footer-section-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #17aae2, #ffb202);
  }

  .footer-section-body {
    font-size: 0.86rem;
    color: #cbd5f5;
  }

  .footer-text {
    margin: 0;
    line-height: 1.9;
  }

  /* کانتکت‌ها */
  .footer-contacts p {
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.86rem;
    color: #e5e7eb;
  }

  .footer-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e5e7eb;
    font-size: 0.8rem;
    border: 1px solid rgba(148, 197, 255, 0.45);
    margin-top: 1px;
  }

  .footer-label {
    font-weight: 600;
    margin-inline-end: 0.25rem;
    color: #f9fafb;
  }

  /* ردیف‌های پایین فوتر */
  .bwt-footer-copyright,
  .bwt-footer-develop {
    font-size: 0.8rem;
    text-align: center;
  }

  .bwt-footer-copyright {
    padding: 0.75rem 0;
    background: linear-gradient(to left, #020617, #020b1f);
    color: #9ca3af;
    border-top: 1px solid rgba(31, 41, 55, 0.9);
  }

  .bwt-footer-develop {
    padding: 0.4rem 0 0.7rem;
    background: linear-gradient(to left, #020b1f, #020617);
    color: #9ca3af;
    border-top: 1px solid rgba(31, 41, 55, 0.9);
  }

  .bwt-footer-develop a {
    color: #e5e7eb;
    font-weight: 600;
    text-decoration: none;
  }

  .bwt-footer-develop a:hover {
    color: #17aae2;
  }

  /* عمومی */
  .footer .left-text {
    width: 100%;
  }

  /* موبایل */
  @media (max-width: 767.98px) {
    .footer-body {
      padding: 2.3rem 0 2.1rem;
    }

    .footer-section-title {
      font-size: 0.9rem;
    }

    .footer-contacts p {
      font-size: 0.82rem;
      flex-wrap: wrap;
    }
  }



  /* ===========================
   Breadcrumbs - Bio
   =========================== */

.bio-breadcrumbs {
    padding: 1.3rem 0 1.6rem;
    background: radial-gradient(circle at top, #0b1120 0, #020617 60%, #020617 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
  }

  .bio-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0 0 0.35rem 0;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #9ca3af;
  }

  .bio-breadcrumbs ol li a {
    color: #d1d5db;
    text-decoration: none;
  }

  .bio-breadcrumbs ol li a:hover {
    color: #ffffff;
  }

  .bio-breadcrumbs h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: #e5e7eb;
  }

  /* ===========================
     Bio Section
     =========================== */

  .bio-section {
    padding: 2.5rem 0 3.5rem;
  }

  /* عنوان طیفی */
  .spectrum-h2 {
    font-size: 1.35rem;
    font-weight: 700;
    background: linear-gradient(90deg, #f97316, #eab308, #22c55e, #2dd4bf, #0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* کارت اصلی بیو */
  .bio-card {
    background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.9));
    border-radius: 1.4rem;
    padding: 1.7rem 1.4rem 1.6rem;
    margin-bottom: 1.8rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.9);
    position: relative;
    overflow: hidden;
  }

  .bio-card::before {
    content: "";
    position: absolute;
    inset-inline-start: -20%;
    inset-block-start: -40%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.28), transparent 65%);
    opacity: 0.8;
    filter: blur(2px);
    pointer-events: none;
  }

  .bio-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -10%;
    inset-block-end: -40%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.24), transparent 60%);
    opacity: 0.9;
    filter: blur(2px);
    pointer-events: none;
  }

  .bio-card > * {
    position: relative;
    z-index: 1;
  }

  /* کارت‌های کوچک فقط عکس */
  .bio-card-small {
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.9));
    border-radius: 1.2rem;
    padding: 0.9rem 0.6rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
  }

  /* تصویر بیو */
  .m-image {
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow:
      0 18px 45px rgba(15, 23, 42, 0.9),
      0 0 0 1px rgba(148, 163, 184, 0.5);
    object-fit: cover;
  }

  /* باکس متن بیو */
  .m-text {
    margin-top: 1.1rem;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 0.9rem;
    line-height: 2.1;
  }

  /* متن داخل بیو */
  .m-text p {
    margin-bottom: 0;
    text-align: justify;
  }

  /* ریسپانسیو */
  @media (max-width: 991.98px) {
    .bio-section {
      padding: 2rem 0 3rem;
    }

    .bio-card {
      padding: 1.4rem 1.1rem 1.5rem;
    }

    .m-text {
      padding: 0.9rem 0.9rem;
      font-size: 0.88rem;
    }

    .spectrum-h2 {
      font-size: 1.1rem;
    }
  }

  @media (max-width: 575.98px) {
    .bio-breadcrumbs {
      text-align: right;
    }
    .bio-breadcrumbs h2 {
      font-size: 1.1rem;
    }

    .bio-card {
      border-radius: 1.1rem;
    }

    .m-image {
      border-radius: 0.9rem;
    }
  }



  /* ===========================
   Health Article (Show Page)
   =========================== */

.health-section {
    background: radial-gradient(circle at top, #020617 0%, #020617 45%, #0b1120 100%);
    min-height: 100vh;
}

/* breadcrumb نرم‌تر */
.breadcrumb-soft {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 999px;
    padding: 0.35rem 1.1rem !important;
    border: 1px solid rgba(148, 163, 184, 0.4);
    backdrop-filter: blur(12px);
    display: flex;
    gap: 5px;
}

.breadcrumb-soft .breadcrumb-item-1 a {
    color: #e5e7eb;
    font-size: 0.8rem;
}



.breadcrumb-soft .breadcrumb-item-1.active {
    color: #38bdf8;
    font-weight: 500;
}

/* کارت اصلی مقاله */
.health-article-card {
    background: radial-gradient(circle at top left,
        rgba(15, 23, 42, 0.98),
        rgba(15, 23, 42, 0.96),
        rgba(15, 23, 42, 0.94)
    );
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.95),
        0 0 0 1px rgba(15, 23, 42, 0.9);
    padding: 2.2rem 1.8rem;
    color: #e5e7eb;
    position: relative;
    overflow: hidden;
}

/* هدر مقاله */
.health-article-header {
    position: relative;
    z-index: 1;
}

.health-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(16, 185, 129, 0.18));
    border: 1px solid rgba(56, 189, 248, 0.6);
    font-size: 0.75rem;
    color: #a5f3fc;
}

.health-title {
    font-size: clamp(1.4rem, 2.1vw, 1.8rem);
    font-weight: 700;
    color: #f9fafb;
    line-height: 1.6;
}

/* تصویر */
.health-cover-wrapper {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.9);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.9);
    background: radial-gradient(circle at top, #0f172a, #020617);
}

.health-cover-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* متن داخلی */
.health-body {
    margin-top: 1.6rem;
    font-size: 0.95rem;
    line-height: 2.2;
    color: #e5e7eb;
}

.health-body p {
    margin-bottom: 1rem;
}

.health-body p:last-child {
    margin-bottom: 0;
}

.health-body a {
    color: #38bdf8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.health-body a:hover {
    color: #7dd3fc;
}

/* تیترها داخل متن */
.health-body h2,
.health-body h3,
.health-body h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #f9fafb;
}

/* لیست‌ها */
.health-body ul,
.health-body ol {
    padding-right: 1.2rem;
    margin-bottom: 1rem;
}

.health-body li {
    margin-bottom: 0.4rem;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .health-article-card {
        padding: 1.4rem 1.1rem;
        border-radius: 1.1rem;
    }

    .breadcrumb-soft {
        border-radius: 0.9rem;
        padding-inline: 0.8rem;
    }
}


/* ===========================
   Blog Article (Show Page)
   =========================== */

   .blog-show-sec {
    background: radial-gradient(circle at top, #020617 0%, #020617 45%, #0b1120 100%);
    min-height: 100vh;
}

/* breadcrumb نرم و تیره – اگر قبلاً تعریف نشده */
.breadcrumb-soft {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    backdrop-filter: blur(12px);
}

.breadcrumb-soft .breadcrumb-item a {
    color: #e5e7eb;
    font-size: 0.8rem;
}

.breadcrumb-soft .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(148, 163, 184, 0.7);
}

.breadcrumb-soft .breadcrumb-item.active {
    color: #38bdf8;
    font-weight: 500;
}

/* کارت مقاله بلاگ */
.blog-article-card {
    background: radial-gradient(circle at top left,
        rgba(15, 23, 42, 0.98),
        rgba(15, 23, 42, 0.96),
        rgba(15, 23, 42, 0.94)
    );
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.95),
        0 0 0 1px rgba(15, 23, 42, 0.9);
    padding: 2.2rem 1.8rem;
    color: #e5e7eb;
    position: relative;
    overflow: hidden;
}

/* هدر مقاله */
.blog-article-header {
    position: relative;
    z-index: 1;
}

.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg,
        rgba(56, 189, 248, 0.18),
        rgba(37, 99, 235, 0.24)
    );
    border: 1px solid rgba(56, 189, 248, 0.6);
    font-size: 0.75rem;
    color: #a5f3fc;
}

.blog-title {
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    font-weight: 700;
    color: #f9fafb;
    line-height: 1.7;
}

.blog-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* تصویر */
.blog-cover-wrapper {
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.9);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.9);
    background: radial-gradient(circle at top, #0f172a, #020617);
}

.blog-cover-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* متن مقاله */
.blog-body {
    margin-top: 1.6rem;
    font-size: 0.95rem;
    line-height: 2.25;
    color: #e5e7eb;
}

.blog-body p {
    margin-bottom: 1rem;
}

.blog-body p:last-child {
    margin-bottom: 0;
}

.blog-body a {
    color: #38bdf8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.blog-body a:hover {
    color: #7dd3fc;
}

/* هدینگ‌ها داخل محتوا */
.blog-body h2,
.blog-body h3,
.blog-body h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #f9fafb;
}

/* اکشن‌های ادمین */
.blog-admin-actions {
    border-top: 1px dashed rgba(148, 163, 184, 0.4);
    padding-top: 1rem;
    margin-top: 1.5rem;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .blog-article-card {
        padding: 1.4rem 1.1rem;
        border-radius: 1.1rem;
    }

    .breadcrumb-soft {
        border-radius: 0.9rem;
        padding-inline: 0.8rem;
    }

    .blog-title {
        font-size: 1.2rem;
    }
}



/* ===========================
   Health List (صحت و شنوایی)
   =========================== */

   .health-list-sec {
    background: radial-gradient(circle at top, #020617 0%, #020617 45%, #0b1120 100%);
    color: #e5e7eb;
}

/* هدر عمومی سِکشن – قابل استفاده برای بقیه صفحات هم هست */
.section-heading {
    max-width: 720px;
    margin: 0 auto;
}

.section-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.9rem;
    font-size: 0.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg,
        rgba(56, 189, 248, 0.1),
        rgba(37, 99, 235, 0.25)
    );
    border: 1px solid rgba(56, 189, 248, 0.55);
    color: #a5f3fc;
}

.section-title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    color: #f9fafb;
    letter-spacing: 0.02em;
}

.section-subtitle {
    font-size: 0.9rem;
    color: #9ca3af;
}

/* کارت‌های لیست صحت */
.health-list {
    margin-top: 1.5rem;
}

.health-item {
    padding: 1.8rem 1.4rem;
    border-radius: 1.5rem;
    background: radial-gradient(circle at top left,
        rgba(15, 23, 42, 0.96),
        rgba(15, 23, 42, 0.98)
    );
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.9),
        0 0 0 1px rgba(15, 23, 42, 0.95);
    position: relative;
    overflow: hidden;
}

/* نوع دوم برای آلتِرنیشن */
.health-item-alt {
    background: radial-gradient(circle at top right,
        rgba(15, 23, 42, 0.96),
        rgba(15, 23, 42, 0.98)
    );
}

/* تصویر */
.health-image-wrapper {
    text-decoration: none;
}

.health-image-inner {
    border-radius: 1.25rem;
    padding: 3px;
    background: linear-gradient(135deg,
        rgba(56, 189, 248, 0.7),
        rgba(59, 130, 246, 0.5),
        rgba(8, 47, 73, 0.9)
    );
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.95);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.health-image {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
}

.health-image-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 70px rgba(15, 23, 42, 1);
}

/* متن */
.health-text {
    padding-inline: 0.5rem;
}

.health-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f9fafb;
}

.health-excerpt {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    line-height: 2.2;
    color: #d1d5db;
}

/* دکمه نرم فیروزه‌ای – عمومی */
.btn-soft-cyan {
    background: linear-gradient(135deg,
        rgba(56, 189, 248, 0.16),
        rgba(37, 99, 235, 0.4)
    );
    border: 1px solid rgba(56, 189, 248, 0.7);
    color: #e0f2fe;
    font-size: 0.8rem;
    padding-inline: 0.9rem;
}

.btn-soft-cyan:hover {
    background: linear-gradient(135deg,
        rgba(56, 189, 248, 0.32),
        rgba(37, 99, 235, 0.65)
    );
    color: #f9fafb;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .health-item {
        padding: 1.2rem 1rem;
        border-radius: 1.1rem;
    }

    .health-image {
        max-height: 220px;
    }

    .health-title {
        font-size: 1rem;
    }

    .health-excerpt {
        font-size: 0.86rem;
    }
}


/* ===========================
   Blog List (اجتماعی)
   =========================== */

   .blog-list-sec {
    background: radial-gradient(circle at top, #020617 0%, #020617 45%, #0b1120 100%);
    color: #e5e7eb;
}

/* کارت‌های بلاگ */
.blog-card {
    border-radius: 1.4rem;
    background: radial-gradient(circle at top left,
        rgba(15, 23, 42, 0.97),
        rgba(15, 23, 42, 0.99)
    );
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow:
        0 20px 55px rgba(15, 23, 42, 0.95),
        0 0 0 1px rgba(15, 23, 42, 0.96);
    overflow: hidden;
    position: relative;
    padding: 0.9rem 0.9rem 1.1rem 0.9rem;
    transition: transform 0.22s ease-out, box-shadow 0.22s ease-out;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 26px 70px rgba(15, 23, 42, 1),
        0 0 0 1px rgba(148, 163, 184, 0.7);
}

/* تصویر بلاگ */
.blog-image-wrapper {
    display: block;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.blog-image-inner {
    border-radius: 1.2rem;
    padding: 3px;
    background: linear-gradient(135deg,
        rgba(56, 189, 248, 0.9),
        rgba(59, 130, 246, 0.7),
        rgba(15, 23, 42, 1)
    );
}

.blog-image {
    border-radius: 1rem;
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

/* متن کارت */
.blog-body {
    padding-inline: 0.2rem;
}

.blog-meta {
    font-size: 0.75rem;
}

.blog-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.7);
    color: #e5e7eb;
}

.blog-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #f9fafb;
    margin: 0;
}

.blog-excerpt {
    font-size: 0.88rem;
    line-height: 2.1;
    color: #d1d5db;
}

/* اگر از social-img قبلی استفاده می‌شد، روی موبایل به هم نخورد */
.social-img img {
    display: block;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .blog-card {
        border-radius: 1.1rem;
        padding: 0.8rem 0.8rem 1rem 0.8rem;
    }

    .blog-image {
        height: 190px;
    }

    .blog-title {
        font-size: 0.98rem;
    }

    .blog-excerpt {
        font-size: 0.84rem;
    }
}


/* ===========================
   Contact / دفتر مرکزی
   =========================== */

   .contact-us-promo {
    background: radial-gradient(circle at top,
        #020617 0%,
        #020617 45%,
        #020617 60%,
        #030712 100%);
    color: #e5e7eb;
}

.contact-card {
    border-radius: 1.6rem;
    background: radial-gradient(circle at top left,
        rgba(15, 23, 42, 0.98),
        rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(148, 163, 184, 0.6);
    box-shadow:
        0 22px 65px rgba(15, 23, 42, 1),
        0 0 0 1px rgba(15, 23, 42, 0.98);
    padding: 1.6rem 1.8rem 1.8rem 1.8rem;
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: "";
    position: absolute;
    inset-inline-end: -60px;
    inset-block-start: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle,
        rgba(56, 189, 248, 0.26),
        transparent 65%);
    opacity: 0.9;
    pointer-events: none;
}

.contact-card-header {
    position: relative;
    z-index: 1;
}

.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.8);
    color: #e5e7eb;
}

.contact-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f9fafb;
    margin: 0;
}

.contact-subtitle {
    font-size: 0.88rem;
    color: #cbd5f5;
    max-width: 34rem;
}

/* آیکن گوش سمت راست */
.contact-icon {
    align-items: center;
    justify-content: center;
}

.contact-icon-inner {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(56, 189, 248, 0.14),
        rgba(15, 23, 42, 0.98));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.9);
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.9);
}

.contact-icon-inner i {
    font-size: 1.4rem;
    color: #22d3ee;
}

/* لیست کانتکت‌ها */
.contact-card-body {
    position: relative;
    z-index: 1;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}

.contact-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.contact-badge {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.9rem;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.contact-badge i {
    font-size: 1rem;
    color: #38bdf8;
}

.contact-list-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.contact-label {
    font-size: 0.78rem;
    color: #9ca3af;
}

.contact-value {
    font-size: 0.92rem;
    color: #e5e7eb;
}

.contact-link {
    text-decoration: none;
    color: #e5e7eb;
}

.contact-link:hover {
    color: #38bdf8;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .contact-card {
        border-radius: 1.2rem;
        padding: 1.3rem 1.2rem 1.5rem 1.2rem;
    }

    .contact-title {
        font-size: 1.1rem;
    }

    .contact-subtitle {
        font-size: 0.83rem;
    }

    .contact-card::before {
        inset-inline-end: -40px;
        inset-block-start: -20px;
        width: 140px;
        height: 140px;
    }
}


/* ===========================
   Hero Mohsen Hearing Center
   =========================== */

   .hero-mohsen {
    padding: 4.5rem 0 3.5rem 0;
    background: radial-gradient(circle at top,
        #020617 0%,
        #020617 40%,
        #020617 60%,
        #030712 100%);
    color: #e5e7eb;
    position: relative;
    overflow: hidden;
}

/* هاله‌ی پس‌زمینه با انیمیشن نرم */
.hero-mohsen::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 999px;
    background: radial-gradient(circle,
        rgba(56, 189, 248, 0.25),
        transparent 60%);
    inset-inline-end: -160px;
    inset-block-start: -120px;
    filter: blur(2px);
    opacity: 0.9;
    pointer-events: none;
    animation: heroHalo 18s ease-in-out infinite alternate;
}

.hero-mohsen-content {
    position: relative;
    z-index: 1;
}

/* چیپ بالا با انیمیشن subtle */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.8);
    color: #e5e7eb;
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.25);
    animation: heroPulse 3.4s ease-in-out infinite;
}

.hero-chip i {
    font-size: 0.9rem;
    color: #22d3ee;
}

/* تیتر و خط زیر آن */
.hero-title {
    font-family: "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #f9fafb;
}

.hero-title-underline {
    margin-top: 0.45rem;
    height: 3px;
    width: 100%;
    max-width: 150px;
    overflow: hidden;
}

.hero-title-underline span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #22d3ee, #38bdf8, #22d3ee);
    background-size: 200% 100%;
    animation: heroUnderlineMove 4s linear infinite;
}

/* توضیح کوتاه */
.hero-subtitle {
    font-size: 0.97rem;
    line-height: 1.9;
    color: #cbd5f5;
    max-width: 34rem;
}

/* دکمه‌ها */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.btn-hero-primary,
.btn-hero-outline {
    border-radius: 999px;
    font-size: 0.9rem;
    padding: 0.55rem 1.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-width: 1px;
    border-style: solid;
    transition: all 0.2s ease-out;
    cursor: pointer;
}

.btn-hero-primary {
    background: linear-gradient(135deg, #22d3ee, #38bdf8);
    border-color: rgba(56, 189, 248, 0.3);
    color: #0f172a;
    box-shadow: 0 15px 35px rgba(8, 47, 73, 0.75);
}

.btn-hero-primary:hover {
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
    color: #0b1120;
    transform: translateY(-1px) translateZ(0);
    box-shadow: 0 18px 40px rgba(8, 47, 73, 0.9);
}

.btn-hero-outline {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.8);
    color: #e5e7eb;
}

.btn-hero-outline:hover {
    background: rgba(15, 23, 42, 0.95);
    color: #e0f2fe;
    transform: translateY(-1px);
}

/* چیپ‌های پایین (برچسب خدمات) */
.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.7);
    font-size: 0.78rem;
    color: #e5e7eb;
}

.hero-tag i {
    font-size: 0.85rem;
    color: #38bdf8;
}

/* ردیف تماس */
.hero-contact {
    font-size: 0.86rem;
    color: #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.9;
}

.hero-contact i {
    color: #22d3ee;
}

.hero-contact a {
    color: #7dd3fc;
    text-decoration: none;
    position: relative;
    padding-bottom: 1px;
}

.hero-contact a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 1px;
    background: linear-gradient(90deg, #22d3ee, #38bdf8);
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 0.2s ease-out;
}

.hero-contact a:hover::after {
    transform: scaleX(1);
}

/* کارت سمت چپ (ویژوال) با انیمیشن شناور */
.hero-visual {
    position: relative;
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset-inline-start: -16px;
    inset-block-start: 18px;
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: radial-gradient(circle,
        rgba(56, 189, 248, 0.22),
        transparent 65%);
    opacity: 0.9;
    filter: blur(4px);
    pointer-events: none;
}

.hero-visual-inner {
    position: relative;
    border-radius: 1.5rem;
    background: radial-gradient(circle at top left,
        rgba(15, 23, 42, 0.98),
        rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(148, 163, 184, 0.8);
    box-shadow:
        0 24px 65px rgba(15, 23, 42, 1),
        0 0 0 1px rgba(15, 23, 42, 0.98);
    padding: 1.5rem 1.2rem 1.4rem 1.2rem;
    overflow: hidden;
    animation: heroFloat 8s ease-in-out infinite;
}

/* آیکن گوش */
.hero-visual-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 1.1rem;
    background: radial-gradient(circle,
        rgba(56, 189, 248, 0.16),
        rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    margin-bottom: 0.8rem;
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.3);
    animation: heroBadgePulse 3.2s ease-in-out infinite;
}

.hero-visual-badge i {
    font-size: 1.5rem;
    color: #22d3ee;
}

.hero-visual-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f9fafb;
}

.hero-visual-text {
    font-size: 0.86rem;
    color: #cbd5f5;
    line-height: 1.9;
    margin-top: 0.7rem;
}

/* Pills داخل کارت */
.hero-visual-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.hero-visual-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.8);
    font-size: 0.75rem;
    color: #e5e7eb;
}

.hero-visual-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22d3ee;
}

/* نوار موج شنوایی */
.hero-waveline {
    margin-top: 1.2rem;
    display: flex;
    align-items: flex-end;
    gap: 0.18rem;
    height: 26px;
}

.hero-waveline span {
    flex: 1;
    border-radius: 999px;
    background: linear-gradient(to top, #0f172a, #38bdf8);
    opacity: 0.85;
    transform-origin: center bottom;
    animation: heroWavePulse 2.4s ease-in-out infinite;
}

.hero-waveline span:nth-child(2),
.hero-waveline span:nth-child(8) {
    height: 40%;
}

.hero-waveline span:nth-child(3),
.hero-waveline span:nth-child(7) {
    height: 70%;
}

.hero-waveline span:nth-child(4),
.hero-waveline span:nth-child(6) {
    height: 100%;
}

.hero-waveline span:nth-child(5) {
    height: 80%;
}

.hero-waveline span:nth-child(1),
.hero-waveline span:nth-child(9) {
    height: 55%;
}

.hero-waveline span:nth-child(10) {
    height: 30%;
}

.hero-waveline span:nth-child(odd) {
    animation-delay: 0.15s;
}

.hero-waveline span:nth-child(even) {
    animation-delay: 0.35s;
}

/* انیمیشن‌ها */
@keyframes heroWavePulse {
    0%, 100% {
        transform: scaleY(1);
        opacity: 0.85;
    }
    50% {
        transform: scaleY(0.6);
        opacity: 0.6;
    }
}

@keyframes heroFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes heroPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.15);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(15, 23, 42, 0);
    }
}

@keyframes heroBadgePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4);
    }
    50% {
        box-shadow: 0 0 0 14px rgba(15, 23, 42, 0);
    }
}

@keyframes heroHalo {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.75;
    }
    100% {
        transform: translate3d(-10px, 18px, 0) scale(1.12);
        opacity: 0.95;
    }
}

@keyframes heroUnderlineMove {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ریسپانسیو */
@media (max-width: 992px) {
    .hero-mohsen {
        padding: 3.2rem 0 2.4rem 0;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .hero-actions {
        gap: 0.45rem;
    }

    .hero-visual-inner {
        margin-top: 0.7rem;
        border-radius: 1.2rem;
    }
}

@media (max-width: 576px) {
    .hero-mohsen {
        padding-top: 2.8rem;
    }

    .hero-chip {
        font-size: 0.75rem;
        padding-inline: 0.75rem;
    }

    .hero-title {
        font-size: 1.4rem;
    }

    .hero-visual {
        margin-top: 1.5rem;
    }
}