:root {
          --primary-purple: #9C3AAC; /* بنفش اصلی */
          --primary-blue: #3779EA;   /* آبی اصلی */
          --dark-background: #060606; /* پس‌زمینه تیره */
          --text-color: rgba(255, 255, 255, 0.92); /* رنگ متن روشن */
          --line-color: rgba(255, 255, 255, 0.14); /* خطوط نازک */
          --glass-light: rgba(255, 255, 255, 0.05); /* شفافیت کم برای شیشه */
          --glass-medium: rgba(255, 255, 255, 0.12); /* شفافیت متوسط برای شیشه */
          --shadow-strong: 0 15px 40px rgba(0,0,0,0.4); /* سایه قوی */
          --shadow-medium: 0 8px 25px rgba(0,0,0,0.3); /* سایه متوسط */
        }

        body {
            margin: 0;
            font-family: 'Tahoma', sans-serif;
            background-color: var(--dark-background); /* پس‌زمینه کلی صفحه */
            color: var(--text-color);
            overflow-x: hidden; /* جلوگیری از اسکرول افقی */
        }

        /* -- سکشن بنر -- */
        .tech-banner-section {
            position: relative;
            width: 100%;
            padding: 60px 40px; /* پدینگ بالا و پایین بیشتر برای حس پر بودن */
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap; /* اجازه به آیتم‌ها برای رفتن به خط بعد */
            gap: 30px; /* فاصله بین آیتم‌ها */
            overflow: hidden; /* برای اینکه افکت‌های پس‌زمینه بیرون نزند */
        }

        @keyframes move-dots {
            from { transform: translate(0, 0); }
            to { transform: translate(10px, 10px); }
        }

        /* -- کانتینر داخلی برای اعمال لایه‌های شیشه‌ای -- */
        .banner-content-wrapper {
            position: relative; /* برای قرار گرفتن روی افکت‌های پس‌زمینه */
            z-index: 2; /* بالاتر از افکت‌های پس‌زمینه */
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            flex-wrap: wrap;
            gap: 30px;
            background: rgba(255, 255, 255, 0.04); /* لایه شیشه‌ای نازک */
            border-radius: 25px; /* گوشه‌های گرد بزرگ */
            padding: 40px;
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.08), var(--shadow-medium); /* سایه داخلی و خارجی */
            backdrop-filter: blur(20px); /* افکت بلور */
            -webkit-backdrop-filter: blur(20px); /* برای سازگاری با سافاری */
        }

        /* -- بخش متن بنر -- */
        .banner-text-content {
            flex: 1; /* متن فضا را اشغال کند */
            max-width: 60%; /* حداکثر عرض متن در دسکتاپ */
            text-align: right;
            padding-left: 20px; /* فاصله با لبه */
        }

        .banner-text-content h2 {
            font-size: 2.5rem; /* تیتر بزرگ */
            margin-bottom: 15px;
            background: linear-gradient(90deg, var(--primary-purple), var(--primary-blue)); /* گرادیان روی تیتر */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent; /* برای مرورگرهایی که پشتیبانی نمی‌کنند */
        }

        .banner-text-content p {
            font-size: 1.1rem;
            color: var(--text-color);
            line-height: 1.7;
            margin-bottom: 25px;
        }

        .banner-cta-button {
            display: inline-block;
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: bold;
            color: white;
            background: linear-gradient(90deg, var(--primary-purple), var(--primary-blue)); /* گرادیان دکمه */
            border: none;
            border-radius: 10px; /* گوشه‌های گرد دکمه */
            cursor: pointer;
            transition: all 0.4s ease-out;
            box-shadow: var(--shadow-medium);
            text-decoration: none; /* حذف خط زیر لینک */
        }

        .banner-cta-button:hover {
            transform: translateY(-3px); /* کمی بالا رفتن در هاور */
            box-shadow: var(--shadow-strong); /* سایه قوی‌تر */
            filter: brightness(1.1); /* کمی روشن‌تر شدن */
        }

        /* -- بخش تصویر بنر -- */
        .banner-image-content {
            flex-shrink: 0; /* تصویر فضا را از دست ندهد */
            max-width: 35%; /* حداکثر عرض تصویر */
            height: auto;
            border-radius: 15px; /* گوشه‌های گرد برای تصویر */
            box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* سایه برای برجسته کردن تصویر */
            border: 2px solid var(--glass-medium); /* حاشیه شیشه‌ای نازک */
        }

        /* -- استایل برای موبایل (یا صفحات کوچک) -- */
        @media (max-width: 768px) {
            .tech-banner-section {
                padding: 40px 20px;
                justify-content: center; /* وسط‌چین کردن در موبایل */
            }

            .banner-content-wrapper {
                flex-direction: column; /* چیدمان عمودی */
                padding: 30px 20px;
            }

            .banner-text-content {
                max-width: 100%; /* متن کل عرض را بگیرد */
                padding-left: 0;
                margin-bottom: 25px; /* فاصله زیر متن */
            }

            .banner-text-content h2 {
                font-size: 2rem; /* تیتر کوچکتر در موبایل */
            }

            .banner-text-content p {
                font-size: 1rem;
            }

            .banner-image-content {
                max-width: 70%; /* تصویر عرض بیشتری بگیرد */
            }
        }