html {
        scroll-behavior: smooth;
      }
      body {
        font-family: Inter, "Noto Sans SC", "Noto Sans Arabic", system-ui,
          sans-serif;
      }
      .hero-mask {
        background: linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.78) 42%,
            rgba(255, 255, 255, 0.28) 100%
          ),
          linear-gradient(
            180deg,
            rgba(11, 99, 246, 0.08),
            rgba(18, 185, 129, 0.05)
          );
      }
      .shine {
        position: relative;
        overflow: hidden;
      }
      .shine::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          110deg,
          transparent 20%,
          rgba(255, 255, 255, 0.55) 48%,
          transparent 72%
        );
        transform: translateX(-130%);
        animation: shineSweep 2.8s ease-in-out infinite;
        pointer-events: none;
      }
      @keyframes shineSweep {
        0% {
          transform: translateX(-130%);
        }
        55%,
        100% {
          transform: translateX(130%);
        }
      }
      .pulse-ring {
        animation: pulseRing 2.2s ease-out infinite;
      }
      @keyframes pulseRing {
        0% {
          transform: scale(1);
          opacity: 0.55;
        }
        100% {
          transform: scale(1.35);
          opacity: 0;
        }
      }
      .ticker {
        mask-image: linear-gradient(
          90deg,
          transparent,
          #000 8%,
          #000 92%,
          transparent
        );
      }
      .ticker-track {
        animation: ticker 28s linear infinite;
        width: max-content;
      }
      @keyframes ticker {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      [dir="rtl"] .ticker-track {
        animation-name: tickerRtl;
      }
      @keyframes tickerRtl {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(50%);
        }
      }
      .signal-row {
        animation: fadeSlide 0.45s ease;
      }
      @keyframes fadeSlide {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .faq-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
      }
      .faq-item.open .faq-body {
        max-height: 220px;
      }
      .faq-item.open .faq-chevron {
        transform: rotate(180deg);
      }
      .lang-menu {
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition: 0.18s ease;
      }
      .lang-wrap.open .lang-menu {
        opacity: 1;
        pointer-events: auto;
        transform: none;
      }
      .mobile-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }
      .mobile-panel.open {
        max-height: 420px;
      }
      canvas {
        display: block;
        width: 100%;
        height: 100%;
      }
      @media (prefers-reduced-motion: reduce) {
        .ticker-track,
        [dir="rtl"] .ticker-track,
        .signal-row,
        .pulse-ring,
        .shine::after {
          animation: none !important;
        }
        *[data-aos] {
          opacity: 1 !important;
          transform: none !important;
          transition: none !important;
        }
      }
      html:not(.js) [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }