Update index.html

index.html

@@ -542,11 +542,11 @@
             }
         }
 
-        /* --- دکمه اختصاصی هوش مصنوعی با مرز چرخان لیزری (پس‌زمینه سفید) --- */
+        /* --- دکمه اختصاصی هوش مصنوعی با مرز چرخان لیزری (نسخه کوچک و فشرده) --- */
         .ai-laser-hero-btn {
             width: 100%;
-            padding: 20px 24px;
-            border-radius: 20px;
+            padding: 13px 16px;
+            border-radius: 16px;
             border: 1px solid transparent;
             cursor: pointer;
             display: flex;
@@ -558,10 +558,10 @@
             position: relative;
             z-index: 0;
             overflow: hidden;
-            background: #eef2ff;
+            background: linear-gradient(135deg, #eef2ff 0%, #ecfdf9 100%);
             color: #312e81;
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
-            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+            box-shadow: 0 6px 16px -6px rgba(74, 108, 250, 0.22);
+            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
             font-family: var(--app-font);
             margin-bottom: 2.5rem; /* فاصله تا گویندگان */
             box-sizing: border-box;
@@ -572,7 +572,7 @@
             position: absolute;
             top: 50%; left: 50%;
             width: 150%; height: 500%;
-            background: conic-gradient(from 0deg, transparent 0%, transparent 70%, #00f2fe 80%, #4facfe 100%);
+            background: conic-gradient(from 0deg, transparent 0%, transparent 70%, var(--accent-secondary) 80%, var(--accent-primary) 100%);
             transform: translate(-50%, -50%) rotate(0deg);
             animation: spinBg 4s linear infinite;
             z-index: -2;
@@ -582,8 +582,8 @@
             content: '';
             position: absolute;
             inset: 2px; /* ضخامت خط چرخان */
-            background: #eef2ff; /* پس‌زمینه داخلی دکمه (مهِ نیلی پاستلی) */
-            border-radius: 18px;
+            background: linear-gradient(135deg, #eef2ff 0%, #ecfdf9 100%);
+            border-radius: 14px;
             z-index: -1;
         }
 
@@ -593,80 +593,86 @@
 
         .ai-laser-hero-btn:hover {
             transform: translateY(-2px);
-            box-shadow: 0 15px 30px -5px rgba(79, 172, 254, 0.15);
+            box-shadow: 0 10px 22px -6px rgba(74, 108, 250, 0.3);
         }
 
         .ai-laser-hero-btn .pro-btn-content {
             display: flex;
             align-items: center;
-            gap: 18px;
+            gap: 12px;
             z-index: 2;
+            min-width: 0;
         }
 
         .ai-laser-hero-btn .pro-icon-box {
-            width: 52px;
-            height: 52px;
-            border-radius: 16px;
+            width: 38px;
+            height: 38px;
+            border-radius: 11px;
             display: flex;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
-            background: #f1f5f9;
-            border: 1px solid #e2e8f0;
-            color: #4facfe;
-            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+            color: #fff;
+            box-shadow: 0 4px 10px -2px rgba(74, 108, 250, 0.45);
+            transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
         }
 
         .ai-laser-hero-btn .pro-icon-box svg {
-            width: 26px;
-            height: 26px;
-            stroke-width: 1.8;
+            width: 19px;
+            height: 19px;
+            stroke-width: 2;
         }
 
         .ai-laser-hero-btn .pro-text {
             display: flex;
             flex-direction: column;
-            gap: 6px;
+            gap: 1px;
             z-index: 2;
+            min-width: 0;
         }
 
         .ai-laser-hero-btn .pro-title {
-            font-size: 1.25rem;
+            font-size: 1rem;
             font-weight: 800;
-            line-height: 1.2;
-            letter-spacing: -0.5px;
+            line-height: 1.25;
+            letter-spacing: -0.3px;
             color: #1e1b4b;
+            white-space: nowrap;
         }
 
         .ai-laser-hero-btn .pro-subtitle {
-            font-size: 0.9rem;
+            font-size: 0.78rem;
             font-weight: 500;
             color: #4f46e5;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .ai-laser-hero-btn .pro-action {
-            width: 44px;
-            height: 44px;
+            width: 32px;
+            height: 32px;
             border-radius: 50%; /* دایره‌ای کردن کامل به جای مستطیل متنی */
             display: flex;
             align-items: center;
             justify-content: center;
-            background: rgba(79, 172, 254, 0.1);
-            color: #4facfe;
-            border: 1px solid rgba(79, 172, 254, 0.2);
+            background: rgba(74, 108, 250, 0.1);
+            color: var(--accent-primary);
+            border: 1px solid rgba(74, 108, 250, 0.2);
             z-index: 2;
             flex-shrink: 0;
             transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
 
         .ai-laser-hero-btn .pro-action svg {
-            width: 18px;
-            height: 18px;
+            width: 15px;
+            height: 15px;
             transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
 
         .ai-laser-hero-btn:hover .pro-action {
-            background: #4facfe;
+            background: var(--accent-primary);
             color: #ffffff;
             border-color: transparent;
         }
@@ -675,6 +681,10 @@
             transform: translateX(-6px);
         }
 
+        .ai-laser-hero-btn:hover .pro-icon-box {
+            transform: scale(1.08) rotate(-4deg);
+        }
+
         /* --- کدهای اختصاصی برای نمایش منظم دکمه در صفحات موبایل --- */
         @media (max-width: 600px) {
             .ai-laser-hero-btn {
@@ -683,40 +693,40 @@
                 margin-right: -1rem; 
                 margin-left: -1rem; 
                 
-                padding: 20px 16px; /* افزایش پدینگ عمودی جهت بزرگتر و ضخیم‌تر شدن ارتفاع دکمه */
-                border-radius: 16px;
+                padding: 12px 14px;
+                border-radius: 14px;
                 margin-bottom: 2.2rem;
             }
             .ai-laser-hero-btn::after {
-                border-radius: 14px;
+                border-radius: 12px;
                 inset: 1px;
             }
             .ai-laser-hero-btn .pro-btn-content {
                 gap: 8px;
             }
             .ai-laser-hero-btn .pro-icon-box {
-                width: 42px;
-                height: 42px;
-                border-radius: 12px;
+                width: 34px;
+                height: 34px;
+                border-radius: 10px;
             }
             .ai-laser-hero-btn .pro-icon-box svg {
-                width: 22px;
-                height: 22px;
+                width: 17px;
+                height: 17px;
             }
             .ai-laser-hero-btn .pro-text {
-                gap: 2px;
+                gap: 1px;
             }
             .ai-laser-hero-btn .pro-title {
-                font-size: 1.05rem;
+                font-size: 0.9rem;
                 white-space: nowrap;
             }
             .ai-laser-hero-btn .pro-subtitle {
-                font-size: 0.8rem;
+                font-size: 0.7rem;
                 white-space: nowrap;
             }
             .ai-laser-hero-btn .pro-action {
-                width: 36px;
-                height: 36px;
+                width: 30px;
+                height: 30px;
             }
             .ai-laser-hero-btn .pro-action svg {
                 width: 14px;
@@ -745,7 +755,6 @@
                             <span class="pro-subtitle">صفر تا صد با AI (اینجا کلیک کنید)</span>
                         </div>
                     </div>
-                    <!-- دکمه اکشن به شکل یک دایره فاقد متن و با آیکون هدایت‌کننده مدرن -->
                     <div class="pro-action">
                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 18l-6-6 6-6"/></svg>
                     </div>