@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

    /* نوار پایینی */
    .footer-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      border-top: 1px solid #e7e5e4;
      /* border-mahal-border */
      padding: 1.5rem 1rem;
      text-align: center;
      max-width: 100%;
    }

    /* ریسپانسیو نوار پایینی - تبلت و بالاتر */
    @media (min-width: 640px) {
      .footer-bottom {
        padding: 1.5rem 1.5rem;
      }
    }

    @media (min-width: 768px) {
      .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        text-align: right;
        /* راست‌چین در دسکتاپ */
        gap: 2rem;
        padding: 1.5rem 2rem;
      }
    }

    @media (min-width: 1024px) {
      .footer-bottom {
        padding: 1.5rem;
        padding-left: 350px;
        padding-right: 200px;
        justify-content: space-between;
      }
    }

    .copyright {
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.75rem;
      color: #78716c;
      /* text-mahal-muted */
      text-align: center;
      /* راست‌چین */
      max-width: 100%;
      word-wrap: break-word;
    }

    @media (min-width: 768px) {
      .copyright {
        text-align: right;
      }
    }

    .copyright strong {
      font-weight: 700;
      color: #e7e5e4;
      /* text-mahal-border */
    }

    .design-credit {
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1.75rem;
      color: #78716c;
      /* text-mahal-muted */
      text-align: center;
      /* راست‌چین */
      max-width: 100%;
      word-wrap: break-word;
    }

    @media (min-width: 768px) {
      .design-credit {
        text-align: right;
      }
    }

    .design-credit a {
      font-weight: 700;
      color: #B08D3E;
      /* text-mahal-primary */
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .design-credit a:hover {
      color: #B08D3E;
      /* hover:text-mahal-primaryDark */
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1rem 0.75rem;
    }

    @media (min-width: 640px) {
      .footer-links {
        gap: 1.25rem 1.25rem;
      }
    }

    @media (min-width: 768px) {
      .footer-links {
        flex-wrap: nowrap;
        justify-content: flex-start;
        /* شروع از راست */
        gap: 1.25rem;
      }
    }

    .footer-links a {
      font-size: 0.75rem;
      font-weight: 700;
      color: #78716c;
      /* text-mahal-muted */
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-links a:hover {
      color: #B08D3E;
      /* hover:text-mahal-primary */
    }

    /* تم آجری */
    [data-dropdown-menu] button[data-value] {
      position: relative;
      overflow: hidden;
      transition: all 0.25s ease;
      color: #4a3f35;
      /* قهوه‌ای خیلی تیره برای متن */
    }

    /* نقطه آجری کنار آیتم */
    [data-dropdown-menu] button[data-value]::before {
      content: "";
      position: absolute;
      right: 14px;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background-color: #B08D3E;
      /* آجری تیره */
      opacity: 0;
      transform: translateY(-50%) scale(0.4);
      transition: all 0.25s ease;
    }

    [data-dropdown-menu] button[data-value]:hover {
      padding-right: 32px;
      background-color: rgba(194, 65, 12, 0.08);
      /* پس‌زمینه آجری بسیار ملایم */
      color: #B08D3E;
      /* متن آجری */
      box-shadow: inset 3px 0 0 rgba(194, 65, 12, 0.4);
      /* خط عمودی آجری */
    }

    [data-dropdown-menu] button[data-value]:hover::before {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    [data-dropdown-menu] button[data-value]:active {
      transform: scale(0.98);
    }

    .results-header-animate {
      opacity: 0;
      transform: translateY(18px) scale(0.98);
      animation: resultsHeaderFadeIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* ==================== Animations ==================== */

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(0.95);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes expandLine {
      from {
        width: 0;
      }

      to {
        width: 1.5rem;
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    /* ==================== Element States ==================== */

    /* Eyebrow animation */
    .hero-eyebrow.active {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .eyebrow-line.active {
      animation: expandLine 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    }

    /* Title animation */
    .hero-title.active {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    }

    .hero-accent {
      display: inline-block;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hero-title.active .hero-accent {
      animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s backwards;
    }

    .hero-title:hover .hero-accent {
      transform: scale(1.05);
    }

    /* Lead animation */
    .hero-lead.active {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    }

    /* CTAs animation */
    .hero-ctas.active {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
    }

    /* Trust line animation */
    .hero-trust.active {
      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
    }

    /* Image animation */
    .hero-image.active {
      animation: fadeInScale 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    }

    /* Image hover effects */
    .hero-image.active .image-wrapper:hover {
      transform: scale(1.02);
    }

    .hero-image.active .image-wrapper:hover img {
      transform: scale(1.05);
    }

    .hero-image.active .frame-offset {
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
    }

    .hero-image.active:hover .frame-offset {
      transform: translate(-8px, -8px);
    }

    /* Caption card floating */
    .caption-card {
      animation: float 3s ease-in-out infinite;
      animation-delay: 1.5s;
    }

    /* Shine effect on primary CTA */
    .shine-effect {
      pointer-events: none;
    }

    /* ==================== Responsive & Accessibility ==================== */

    @media (max-width: 1024px) {
      .caption-card {
        animation-duration: 2.5s;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .caption-card {
        animation: none;
      }

      .hero-image.active .image-wrapper:hover,
      .hero-image.active .image-wrapper:hover img,
      .hero-image.active:hover .frame-offset {
        transform: none;
      }
    }

    .trust-divider {
      width: 1px;
      height: 90%;
      background: linear-gradient(to bottom,
          transparent 0%,
          rgba(229, 231, 235, 0.5) 10%,
          rgba(229, 231, 235, 1) 50%,
          rgba(229, 231, 235, 0.5) 90%,
          transparent 100%);
    }

    .trust-logo {
      filter: grayscale(100%);
      opacity: 0.5;
      transition: opacity 300ms ease-out;
    }

    .trust-logo:hover {
      opacity: 0.8;
    }

    .trust-item:hover .trust-icon {
      stroke: #B08D3E;
      transition: stroke 300ms ease-out;
    }

    :root {
      --navy: #0b2545;
      --gold: #B08D3E;
      --off-white: #fafbfc;
      --border: #e5e7eb;
      --text-muted: #64748b;
    }
    
      /* ==================== انیمیشن‌های Trust Bar ==================== */

      /* ورود سکشن با محوشدگی و لغزش ملایم */
      #trust-bar {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #trust-bar.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* خطوط طلایی ابتدا و انتها */
      #trust-bar.visible .gold-line {
        width: 100%;
        transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
      }

      #trust-bar.visible .gold-line-bottom {
        width: 80%;
        transition: width 2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
      }

      /* فید شدن ترتیبی آیتم‌های آماری */
      .trust-item {
        opacity: 0;
        transform: translateY(25px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #trust-bar.visible .trust-item:nth-child(1) {
        transition-delay: 0.1s;
      }

      #trust-bar.visible .trust-item:nth-child(2) {
        transition-delay: 0.2s;
      }

      #trust-bar.visible .trust-item:nth-child(3) {
        transition-delay: 0.3s;
      }

      #trust-bar.visible .trust-item:nth-child(4) {
        transition-delay: 0.4s;
      }

      #trust-bar.visible .trust-item {
        opacity: 1;
        transform: translateY(0);
      }

      /* انیمیشن خطوط جداکننده عمودی */
      .trust-divider {
        transition: height 1s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #trust-bar.visible .trust-divider {
        height: 50%;
        transition-delay: 0.6s;
      }

      /* افکت رینگ پالس برای آیکون‌ها */
      .pulse-ring {
        animation: pulse-border 2.5s infinite ease-out;
      }

      @keyframes pulse-border {
        0% {
          transform: scale(0.95);
          opacity: 0.7;
        }

        50% {
          transform: scale(1.15);
          opacity: 0;
        }

        100% {
          transform: scale(0.95);
          opacity: 0;
        }
      }

      /* هاله‌های نوری در حال حرکت پس‌زمینه */
      .glow-orb {
        animation: orbit 25s infinite linear;
      }

      .glow-orb-2 {
        animation: orbit-reverse 30s infinite linear;
      }

      @keyframes orbit {
        0% {
          transform: translate(0, 0) scale(1);
        }

        50% {
          transform: translate(30px, -20px) scale(1.15);
        }

        100% {
          transform: translate(0, 0) scale(1);
        }
      }

      @keyframes orbit-reverse {
        0% {
          transform: translate(0, 0) scale(1);
        }

        50% {
          transform: translate(-40px, 30px) scale(1.1);
        }

        100% {
          transform: translate(0, 0) scale(1);
        }
      }

      /* ذرات متحرک */
      .particle {
        animation: floatParticle 8s infinite ease-in-out;
      }

      @keyframes floatParticle {

        0%,
        100% {
          transform: translateY(0) translateX(0);
          opacity: 0.3;
        }

        50% {
          transform: translateY(-20px) translateX(10px);
          opacity: 0.8;
        }
      }

      /* ورود لوگوهای سازمانی */
      .trust-logo-wrapper {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #trust-bar.visible .trust-logo-wrapper {
        opacity: 1;
        transform: scale(1);
      }

      /* تاخیر موجی برای لوگوها */
      #trust-bar.visible .trust-logo-wrapper:nth-child(1) {
        transition-delay: 0.5s;
      }

      #trust-bar.visible .trust-logo-wrapper:nth-child(2) {
        transition-delay: 0.55s;
      }

      #trust-bar.visible .trust-logo-wrapper:nth-child(3) {
        transition-delay: 0.6s;
      }

      #trust-bar.visible .trust-logo-wrapper:nth-child(4) {
        transition-delay: 0.65s;
      }

      #trust-bar.visible .trust-logo-wrapper:nth-child(5) {
        transition-delay: 0.7s;
      }

      #trust-bar.visible .trust-logo-wrapper:nth-child(6) {
        transition-delay: 0.75s;
      }

      /* هاور روان لوگوها */
      .trust-logo-wrapper:hover {
        transform: translateY(-5px) scale(1.05) !important;
      }

      /* ==================== دسترسی‌پذیری — کاهش انیمیشن ==================== */
      @media (prefers-reduced-motion: reduce) {

        #trust-bar,
        .trust-item,
        .trust-logo-wrapper,
        .trust-divider,
        .gold-line,
        .gold-line-bottom {
          transition: none !important;
          opacity: 1 !important;
          transform: none !important;
          width: 100% !important;
          height: auto !important;
        }

        .glow-orb,
        .glow-orb-2,
        .pulse-ring,
        .particle {
          animation: none !important;
          display: none !important;
        }
      }
              /* ---------- Isolated Styles (wu- prefix / no Tailwind dependency) ---------- */
        .wu-section {
          position: relative;
          width: 100%;
          padding: 96px 0;
          background: linear-gradient(135deg, #0b2545 0%, #0d2d52 100%);
          overflow: hidden;
          font-family: Dana, sans-serif;
        }

        /* Decorative background pattern */
        .wu-section::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: radial-gradient(rgba(176, 141, 62, 0.08) 1px, transparent 1px);
          background-size: 24px 24px;
          pointer-events: none;
        }

        .wu-container {
          max-width: 1280px;
          margin: 0 auto;
          padding: 0 24px;
          position: relative;
          z-index: 1;
        }

        /* ---------- Header ---------- */
        .wu-header {
          text-align: center;
          margin-bottom: 72px;
        }

        .wu-badge {
          display: inline-block;
          background: rgba(176, 141, 62, 0.15);
          color: #B08D3E;
          font-size: 14px;
          font-weight: 600;
          padding: 6px 18px;
          border-radius: 9999px;
          margin-bottom: 16px;
          border: 1px solid rgba(176, 141, 62, 0.25);
        }

        .wu-title {
          font-family: Morabba, Dana, sans-serif;
          font-size: clamp(28px, 4vw, 44px);
          font-weight: 800;
          color: #ffffff;
          line-height: 1.4;
          margin: 0;
        }

        .wu-title em {
          font-style: normal;
          color: #B08D3E;
        }

        .wu-divider {
          width: 64px;
          height: 2px;
          background: #B08D3E;
          margin: 24px auto;
        }

        .wu-desc {
          max-width: 680px;
          margin: 0 auto;
          color: rgba(255, 255, 255, 0.8);
          font-size: 17px;
          line-height: 2;
        }

        /* ---------- Grid (3 columns on desktop, 2 on tablet, 1 on mobile) ---------- */
        .wu-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 24px;
        }

        @media (min-width: 640px) {
          .wu-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (min-width: 1024px) {
          .wu-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        /* ---------- Card ---------- */
        .wu-card {
          position: relative;
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(176, 141, 62, 0.2);
          border-radius: 20px;
          padding: 36px 26px 30px;
          overflow: hidden;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.4s ease, border-color 0.4s ease,
            background 0.4s ease;
        }

        .wu-card:hover {
          transform: translateY(-8px);
          border-color: rgba(176, 141, 62, 0.5);
          box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.3);
          background: rgba(255, 255, 255, 1);
        }

        /* Ghost Number */
        .wu-num {
          position: absolute;
          top: 12px;
          left: 18px;
          font-family: Morabba, sans-serif;
          font-size: 64px;
          font-weight: 800;
          line-height: 1;
          color: rgba(11, 37, 69, 0.06);
          transition: color 0.4s ease;
          pointer-events: none;
        }

        .wu-card:hover .wu-num {
          color: rgba(176, 141, 62, 0.2);
        }

        /* Icon Tile */
        .wu-icon {
          width: 56px;
          height: 56px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(176, 141, 62, 0.1);
          color: #B08D3E;
          border-radius: 14px;
          margin-bottom: 22px;
          transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
        }

        .wu-icon svg {
          width: 26px;
          height: 26px;
        }

        .wu-card:hover .wu-icon {
          background: linear-gradient(135deg, #0b2545, #B08D3E);
          color: #ffffff;
          transform: scale(1.06);
        }

        .wu-card h3 {
          font-family: Morabba, Dana, sans-serif;
          font-size: 19px;
          font-weight: 700;
          color: #0b2545;
          margin: 0 0 12px;
        }

        .wu-card p {
          font-size: 14.5px;
          line-height: 1.9;
          color: #64748b;
          margin: 0;
        }

        /* Bottom gold line (RTL grow) */
        .wu-card::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          height: 3px;
          width: 0;
          background: linear-gradient(to left, #B08D3E, #0b2545);
          transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .wu-card:hover::after {
          width: 100%;
        }

        /* Shine Sweep */
        .wu-card::before {
          content: "";
          position: absolute;
          top: 0;
          right: -75%;
          width: 50%;
          height: 100%;
          background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.6), transparent);
          transform: skewX(20deg);
          transition: right 0.7s ease;
          pointer-events: none;
        }

        .wu-card:hover::before {
          right: 130%;
        }

        /* ---------- Entrance Animation ---------- */
        .wu-anim-ready .wu-reveal {
          opacity: 0;
          transform: translateY(28px);
          transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .wu-anim-ready.wu-in .wu-reveal {
          opacity: 1;
          transform: translateY(0);
        }

        .wu-anim-ready.wu-in .wu-reveal:nth-child(1) {
          transition-delay: 0.05s;
        }

        .wu-anim-ready.wu-in .wu-grid .wu-reveal:nth-child(1) {
          transition-delay: 0.12s;
        }

        .wu-anim-ready.wu-in .wu-grid .wu-reveal:nth-child(2) {
          transition-delay: 0.2s;
        }

        .wu-anim-ready.wu-in .wu-grid .wu-reveal:nth-child(3) {
          transition-delay: 0.28s;
        }

        .wu-anim-ready.wu-in .wu-grid .wu-reveal:nth-child(4) {
          transition-delay: 0.36s;
        }

        .wu-anim-ready.wu-in .wu-grid .wu-reveal:nth-child(5) {
          transition-delay: 0.44s;
        }

        .wu-anim-ready.wu-in .wu-grid .wu-reveal:nth-child(6) {
          transition-delay: 0.52s;
        }

        @media (prefers-reduced-motion: reduce) {
          .wu-anim-ready .wu-reveal {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
          }

          .wu-card,
          .wu-card::before,
          .wu-card::after {
            transition: none !important;
          }
        }
          /* ==================== انیمیشن‌های Services ==================== */

      /* ورود سکشن */
      #services {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #services.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* ورود هدر بخش */
      .services-header {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
      }

      #services.visible .services-header {
        opacity: 1;
        transform: translateY(0);
      }

      /* ورود کارت‌ها با تاخیر موجی */
      .service-card {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
      }

      #services.visible .service-card:nth-child(1) {
        transition-delay: 0.3s;
      }

      #services.visible .service-card:nth-child(2) {
        transition-delay: 0.45s;
      }

      #services.visible .service-card:nth-child(3) {
        transition-delay: 0.6s;
      }

      #services.visible .service-card {
        opacity: 1;
        transform: translateY(0);
      }

      /* زیرمنو تنها روی hover (دسکتاپ) */
      @media (hover: hover) {
        .service-submenu {
          max-height: 0;
          opacity: 0;
          transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
        }

        .service-card:hover .service-submenu {
          max-height: 15rem;
          /* 60 = 15rem */
          opacity: 1;
        }
      }

      /* موبایل: زیرمنو همیشه باز */
      @media (hover: none) {
        .service-submenu {
          max-height: none !important;
          opacity: 1 !important;
        }
      }

      /* دسترسی‌پذیری */
      @media (prefers-reduced-motion: reduce) {

        #services,
        .services-header,
        .service-card,
        .service-submenu {
          transition: none !important;
          opacity: 1 !important;
          transform: none !important;
        }
      }
        /* ==================== انیمیشن‌های Timeline ==================== */

      /* ورود سکشن */
      #timeline {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #timeline.visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* ورود هدر */
      .timeline-header {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
      }

      #timeline.visible .timeline-header {
        opacity: 1;
        transform: translateY(0);
      }

      /* ورود مراحل */
      .timeline-step {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      }

      #timeline.visible .timeline-step:nth-child(1) {
        transition-delay: 0.4s;
      }

      #timeline.visible .timeline-step:nth-child(2) {
        transition-delay: 0.55s;
      }

      #timeline.visible .timeline-step:nth-child(3) {
        transition-delay: 0.7s;
      }

      #timeline.visible .timeline-step:nth-child(4) {
        transition-delay: 0.85s;
      }

      #timeline.visible .timeline-step:nth-child(5) {
        transition-delay: 1s;
      }

      #timeline.visible .timeline-step {
        opacity: 1;
        transform: translateY(0);
      }

      /* خط طلایی پرشونده */
      #timeline.visible .timeline-fill {
        width: 100%;
        transition-delay: 0.6s;
      }

      /* موبایل و تبلت: tooltip و خط اتصال کامل مخفی می‌شن */
      @media (max-width: 1023px) {
        .timeline-tooltip {
          display: none;
        }

        .timeline-base,
        .timeline-fill {
          display: none;
        }
      }

      /* دسکتاپ: جلوگیری از overflow tooltip */
      @media (min-width: 1024px) {
        .timeline-step:first-child .timeline-tooltip {
          right: 0;
        }

        .timeline-step:last-child .timeline-tooltip {
          left: 0;
        }
      }

      /* دسترسی‌پذیری */
      @media (prefers-reduced-motion: reduce) {

        #timeline,
        .timeline-header,
        .timeline-step,
        .timeline-fill,
        .timeline-tooltip {
          transition: none !important;
          opacity: 1 !important;
          transform: none !important;
        }

        #timeline.visible .timeline-fill {
          width: 100%;
        }
      }
      /* ==================== CTA / Contact Section Animations ==================== */

/* ----- حالت اولیه (قبل از ورود به دیدرس) ----- */
#call-to-action .cta-media,
#call-to-action .cta-item {
  opacity: 0;
  will-change: opacity, transform;
}

/* تصویر: ورود از راست با کمی زوم */
#call-to-action .cta-media {
  transform: translateX(48px) scale(0.97);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* آیتم‌های متنی: ورود از پایین */
#call-to-action .cta-item {
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--cta-delay, 0ms);
}

/* ----- حالت فعال (وقتی سکشن visible شد) ----- */
#call-to-action.cta-visible .cta-media,
#call-to-action.cta-visible .cta-item {
  opacity: 1;
  transform: none;
}

/* ----- انیمیشن آبشاری آیکون‌ها ----- */
#call-to-action .cta-icon {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition:
    opacity 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--cta-delay, 0ms);
}

#call-to-action.cta-visible .cta-icon {
  opacity: 1;
  transform: none;
}

/* ----- احترام به کاربران حساس به حرکت ----- */
@media (prefers-reduced-motion: reduce) {
  #call-to-action .cta-media,
  #call-to-action .cta-item,
  #call-to-action .cta-icon {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
      /* ===== Articles Slider ===== */
      .articles-track {
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
      }

      .articles-track::-webkit-scrollbar {
        display: none;
      }

      .articles-track.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
        scroll-snap-type: none;
      }

      .articles-track.is-dragging a,
      .articles-track.is-dragging img {
        pointer-events: none;
      }

      /* Entrance animation — matches #timeline pattern */
      .articles-header,
      .article-card {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
      }

      #articles.visible .articles-header {
        opacity: 1;
        transform: translateY(0);
      }

      #articles.visible .article-card {
        opacity: 1;
        transform: translateY(0);
      }

      #articles.visible .article-card:nth-child(1) {
        transition-delay: 0.1s;
      }

      #articles.visible .article-card:nth-child(2) {
        transition-delay: 0.2s;
      }

      #articles.visible .article-card:nth-child(3) {
        transition-delay: 0.3s;
      }

      #articles.visible .article-card:nth-child(4) {
        transition-delay: 0.4s;
      }

      @media (prefers-reduced-motion: reduce) {

        .articles-header,
        .article-card {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }
         .faq-answer {

        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      }

      .faq-icon svg {

        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      }

      @media (prefers-reduced-motion: reduce) {

        .faq-answer,

        .faq-icon svg,

        .faq-question,

        article[role=“listitem”] {

          transition: none !important;

        }

      }

      .faq-question:focus-visible {

        outline: 2px solid #B08D3E;

        outline-offset: -2px;

      }
    /* Header Compact State */
    #site-header.header-compact {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    #site-header.header-compact #header-inner {
      height: 60px;
    }

    #site-header.header-compact #site-logo {
      height: 40px;
      width: 40px;
    }

    /* Articles Slider Buttons */
    #articles-right:disabled,
    #articles-left:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }