diff --git a/public/images/services-hero-dark.png b/public/images/services-hero-dark.png
index b527799..fcfeaaa 100644
Binary files a/public/images/services-hero-dark.png and b/public/images/services-hero-dark.png differ
diff --git a/public/images/services-hero-dark2.png b/public/images/services-hero-dark2.png
new file mode 100644
index 0000000..b527799
Binary files /dev/null and b/public/images/services-hero-dark2.png differ
diff --git a/src/app/[locale]/services/[slug]/service-detail-page.tsx b/src/app/[locale]/services/[slug]/service-detail-page.tsx
index 61f4136..42797c3 100644
--- a/src/app/[locale]/services/[slug]/service-detail-page.tsx
+++ b/src/app/[locale]/services/[slug]/service-detail-page.tsx
@@ -61,8 +61,7 @@ function GradientIconBox({ children }: { children: React.ReactNode }) {
 }
 
 function FeatureIcon({ name }: { name: 'bolt' | 'shield' | 'cloud' | 'wp' | 'headphones' | 'rocket' }) {
-  const className =
-    'w-6 h-6 text-[#84e1bc] drop-shadow-[0_0_14px_rgba(132,225,188,0.25)]';
+  const className = 'w-6 h-6 text-current drop-shadow-[0_0_14px_rgba(255,255,255,0.18)]';
   switch (name) {
     case 'bolt':
       return <Zap className={className} />;
@@ -115,7 +114,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
   };
 
   return (
-    <div dir={dir} className="text-[color:var(--text-primary)]">
+    <div dir={dir} className="text-[color:var(--text-primary)] dark:bg-[#000315] ">
       {/* Hero */}
       <section className="relative overflow-hidden pt-28 lg:pt-32">
         <div className="absolute inset-0 z-0">
@@ -130,7 +129,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
             transition={{ duration: 1.1, ease: 'easeOut' }}
             className="absolute inset-0 opacity-[var(--hero-image-opacity)]"
           >
-            <div className="absolute inset-y-0 left-0 w-[52%] max-w-[820px] pointer-events-none">
+            <div className="absolute inset-y-0 left-20 w-[70%] max-w-[1120px] pointer-events-none">
               <Image
                 src={
                   mounted && resolvedTheme === 'light'
@@ -151,9 +150,9 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
             <div className="absolute inset-y-0 right-0 w-[78%] pointer-events-none" />
 
             {/* Bottom fade */}
-            <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[var(--hero-bottom-fade-from)] to-transparent pointer-events-none" />
+            <div className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none" />
             {/* Dark-only bottom fade (from #010D1F to transparent) */}
-            <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-[#010D1F] to-transparent pointer-events-none hidden dark:block" />
+            <div className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none hidden dark:block" />
           </motion.div>
         </div>
 
@@ -225,7 +224,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
         </div>
 
         <div className="max-w-7xl mx-auto px-6 lg:px-10 mt-12">
-          <div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl overflow-hidden">
+          <div className="glass-rotating-border rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] overflow-hidden">
             <div className="grid grid-cols-2 lg:grid-cols-4 divide-y divide-[color:var(--border-10)] lg:divide-y-0 lg:divide-x lg:divide-[color:var(--border-10)]">
               {content.quickStats.map((s, idx) => (
                 <div
@@ -245,7 +244,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
           </div>
         </div>
 
-        <div className="h-16" />
+        {/* <div className="h-16" /> */}
       </section>
 
       {/* Features */}
@@ -256,18 +255,52 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
         </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-          {content.features.map((f) => (
-            <div
-              key={f.title}
-              className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl p-6 hover:bg-[color:var(--glass-05)] transition-colors"
-            >
-              <div className="w-12 h-12 rounded-2xl bg-[color:var(--glass-05)] border border-[color:var(--border-10)] flex items-center justify-center mb-5">
-                <FeatureIcon name={f.icon} />
+          {content.features.map((f, idx) => {
+            const accents = [
+              { border: '#a78bfa', icon: '#a78bfa' }, // purple
+              { border: '#60a5fa', icon: '#60a5fa' }, // blue
+              { border: '#22d3ee', icon: '#22d3ee' }, // cyan
+              { border: '#34d399', icon: '#34d399' }, // green
+            ];
+            const accent = accents[idx % accents.length];
+
+            return (
+              <div
+                key={f.title}
+                className={[
+                  'group relative rounded-3xl overflow-hidden',
+                  'border bg-[color:var(--glass-04)]',
+                  'shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_24px_80px_rgba(0,0,0,0.35)]',
+                  'light:shadow-[0_0_0_1px_rgba(2,6,23,0.06),0_18px_60px_rgba(2,6,23,0.08)]',
+                  'transition-transform duration-300 hover:-translate-y-0.5',
+                ].join(' ')}
+                style={{
+                  borderColor: `${accent.border}33`,
+                  boxShadow: `0 0 0 1px ${accent.border}1f, 0 24px 80px rgba(0,0,0,0.35)`,
+                }}
+              >
+                <div className="relative p-6">
+                  <div className="pointer-events-none absolute inset-0 rounded-3xl ring-1 ring-white/10 light:ring-black/5" />
+
+                  <div className="relative mb-5 inline-flex">
+                    <span
+                      className="relative w-14 h-14 rounded-2xl border bg-[color:var(--glass-05)] dark:bg-[rgba(9,17,32,0.60)] light:bg-white/80 backdrop-blur-md flex items-center justify-center"
+                      style={{
+                        borderColor: `${accent.icon}55`,
+                        boxShadow: `0 0 0 1px ${accent.icon}22, 0 0 32px ${accent.icon}26`,
+                        color: accent.icon,
+                      }}
+                    >
+                      <FeatureIcon name={f.icon} />
+                    </span>
+                  </div>
+
+                  <div className="relative text-lg font-semibold mb-2">{f.title}</div>
+                  <div className="relative text-sm leading-relaxed text-[color:var(--text-muted)]">{f.desc}</div>
+                </div>
               </div>
-              <div className="text-lg font-semibold mb-2">{f.title}</div>
-              <div className="text-sm leading-relaxed text-[color:var(--text-muted)]">{f.desc}</div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </motion.section>
 
@@ -283,7 +316,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
             <div
               key={p.name}
               className={[
-                'relative rounded-3xl border backdrop-blur-xl p-6 flex flex-col',
+                'relative rounded-3xl border p-6 flex flex-col',
                 p.featured
                   ? 'border-[#84e1bc]/40 bg-gradient-to-b from-[#84e1bc]/10 to-[color:var(--glass-04)] shadow-[0_0_0_1px_rgba(132,225,188,0.12),0_20px_80px_rgba(0,0,0,0.35)]'
                   : 'border-[color:var(--border-10)] bg-[color:var(--glass-04)]',
@@ -328,7 +361,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
       {/* FAQ + Why */}
       <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-24">
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
-          <div className="lg:col-span-7 rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl p-6 lg:p-8">
+          <div className="lg:col-span-7 rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] p-6 lg:p-8">
             <h2 className="text-xl lg:text-2xl font-bold mb-2">{content.faqTitle}</h2>
             <p className="text-sm text-[color:var(--text-muted)] mb-6">{content.faqSubtitle}</p>
 
@@ -364,7 +397,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
             </div>
           </div>
 
-          <div className="lg:col-span-5 rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl p-6 lg:p-8 relative overflow-hidden">
+          <div className="lg:col-span-5 rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] p-6 lg:p-8 relative overflow-hidden">
             <div className="absolute inset-0 opacity-70 pointer-events-none">
               <div className="absolute -top-24 -right-24 w-72 h-72 bg-[#84e1bc]/10 blur-3xl rounded-full" />
               <div className="absolute -bottom-24 -left-24 w-72 h-72 bg-[#80c8f5]/10 blur-3xl rounded-full" />
@@ -403,7 +436,7 @@ export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
 
       {/* Final CTA */}
       <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-20 pb-24">
-        <div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] backdrop-blur-xl p-8 lg:p-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
+        <div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] p-8 lg:p-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
           <div>
             <h3 className="text-2xl font-bold mb-2">{content.finalCtaTitle}</h3>
             <p className="text-sm text-[color:var(--text-muted)] leading-relaxed max-w-2xl">{content.finalCtaDesc}</p>
diff --git a/src/app/components/maincontext.tsx b/src/app/components/maincontext.tsx
index 137d13f..017d920 100644
--- a/src/app/components/maincontext.tsx
+++ b/src/app/components/maincontext.tsx
@@ -37,7 +37,7 @@ export default function MainContent() {
         کادر اصلی دربرگیرنده کل محتوا
         استفاده از mt-32- برای کشیدن کادر به بالا و ادغام با هیرو
       */}
-      <div className="max-w-[1400px] mx-auto -mt-32 bg-[color:var(--surface-main-wrap)] border border-[color:var(--border-10)] rounded-[2.5rem] p-8 md:p-12 lg:p-16 space-y-16 en-shadow-left">
+      <div className="max-w-7xl mx-auto -mt-32 bg-[color:var(--surface-main-wrap)] border border-[color:var(--border-10)] rounded-[2.5rem] p-8 md:p-12 lg:p-16 space-y-16 en-shadow-left">
 
         {/* بخش محصولات */}
         <motion.div
diff --git a/src/app/globals.css b/src/app/globals.css
index 5266bfb..c9232b4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,113 @@
 @import "tailwindcss";
 
+
+
+
+
+
+
+
+
+
+
+/* Tailwind variants for manual theming (next-themes sets `html` class to `dark`/`light`) */
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (&:where(.light, .light *));
+
+/* Rotating glass border (used on service detail quick-stats)
+   Uses `transform: rotate()` for smoother (GPU-friendly) animation. */
+   @property --rb-angle {
+    syntax: '<angle>';
+    inherits: false;
+    initial-value: 0deg;
+  }
+  
+  @keyframes rb-spin {
+    to {
+      --rb-angle: 360deg;
+    }
+  }
+  
+  @keyframes rb-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  .glass-rotating-border {
+    position: relative;
+  }
+  
+  .glass-rotating-border::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1.5px; /* border thickness */
+    pointer-events: none;
+    opacity: 0;
+    background: conic-gradient(
+      from var(--rb-angle),
+      rgba(255, 255, 255, 0) 0deg,
+      rgba(128, 200, 245, 0.55) 80deg,
+      rgba(167, 139, 250, 0.55) 155deg,
+      rgba(132, 225, 188, 0.55) 230deg,
+      rgba(96, 165, 250, 0.55) 305deg,
+      rgba(255, 255, 255, 0) 360deg
+    );
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    filter: drop-shadow(0 0 22px rgba(128, 200, 245, 0.12));
+    animation: rb-fade-in 700ms ease-out 150ms forwards, rb-spin 7.5s linear infinite;
+  }
+  
+  html.light .glass-rotating-border::before {
+    background: conic-gradient(
+      from var(--rb-angle),
+      rgba(255, 255, 255, 0) 0deg,
+      rgba(96, 165, 250, 0.40) 85deg,
+      rgba(167, 139, 250, 0.38) 165deg,
+      rgba(34, 211, 238, 0.36) 235deg,
+      rgba(52, 211, 153, 0.34) 310deg,
+      rgba(255, 255, 255, 0) 360deg
+    );
+    filter: drop-shadow(0 0 18px rgba(2, 6, 23, 0.06));
+  }
+
+html.light .glass-rotating-border::after {
+  background: conic-gradient(
+    rgba(255, 255, 255, 0) 0deg 30deg,
+    rgba(96, 165, 250, 0.22) 46deg 72deg,
+    rgba(255, 255, 255, 0) 88deg 124deg,
+    rgba(167, 139, 250, 0.20) 138deg 164deg,
+    rgba(255, 255, 255, 0) 180deg 216deg,
+    rgba(34, 211, 238, 0.18) 230deg 256deg,
+    rgba(255, 255, 255, 0) 272deg 308deg,
+    rgba(52, 211, 153, 0.16) 322deg 346deg,
+    rgba(255, 255, 255, 0) 360deg
+  );
+  filter: blur(16px);
+}
+
+html.light .glass-rotating-border::before {
+  background: conic-gradient(
+    rgba(255, 255, 255, 0) 0deg 28deg,
+    rgba(96, 165, 250, 0.38) 44deg 70deg,
+    rgba(255, 255, 255, 0) 86deg 126deg,
+    rgba(167, 139, 250, 0.34) 140deg 166deg,
+    rgba(255, 255, 255, 0) 182deg 222deg,
+    rgba(34, 211, 238, 0.32) 236deg 262deg,
+    rgba(255, 255, 255, 0) 278deg 318deg,
+    rgba(52, 211, 153, 0.30) 332deg 352deg,
+    rgba(255, 255, 255, 0) 360deg
+  );
+  filter: drop-shadow(0 0 10px rgba(2, 6, 23, 0.05));
+}
+
 @font-face {
   font-family: "YekanBakhFaNum";
   src: url("/fonts/YekanBakhFaNum-Regular.woff") format("woff");