From 14699e6826755e2c3813b152943b8d879d660d25 Mon Sep 17 00:00:00 2001
From: ccadmingit1 <yossi.em@gmail.com>
Date: Mon, 7 Sep 2026 09:59:20 +0000
Subject: [PATCH] =?UTF-8?q?AI=20update:=20=D7=AA=D7=A7=D7=9F=20=D7=90?=
 =?UTF-8?q?=D7=AA=20=D7=A1=D7=A7=D7=A9=D7=9F=20=D7=A9=D7=9C=D7=95=D7=A9?=
 =?UTF-8?q?=D7=AA=20=D7=94=D7=9B=D7=A8=D7=98=D7=99=D7=A1=D7=99=D7=9D=20(50?=
 =?UTF-8?q?0=E2=82=AA=20=D7=91=D7=95=D7=A0=D7=95=D7=A1=20=D7=94=D7=A6?=
 =?UTF-8?q?=D7=98=D7=A8=D7=A4=D7=95=D7=AA,=2010%=20=D7=94=D7=97=D7=96?=
 =?UTF-8?q?=D7=A8=20=D7=A9=D7=91=D7=95=D7=A2=D7=99,=20VIP=20=D7=94=D7=98?=
 =?UTF-8?q?=D7=91=D7=95=D7=AA=20=D7=91=D7=9C=D7=A2=D7=93=D7=99=D7=95=D7=AA?=
 =?UTF-8?q?):?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

הבעיה הנוכחית: הכרטיסים חופפים אחד
---
 style.css | 696 ++++++++++++++++++++++++++----------------------------
 1 file changed, 333 insertions(+), 363 deletions(-)

diff --git a/style.css b/style.css
index cdd1979..6fbbf54 100644
--- a/style.css
+++ b/style.css
@@ -1,52 +1,46 @@
 :root {
-  /* New color palette - gaming modern style */
+  /* Base colors - Gaming inspired dark theme */
   --bg-deep: #0a0e17;
-  --bg-card: #0d1320;
-  --bg-elevated: #131a2b;
-  
-  /* Primary accent - purple-blue glow */
-  --primary: #6366f1;
-  --primary-light: #818cf8;
-  --primary-dark: #4f46e5;
-  
-  /* Secondary accent - cyan/turquoise */
-  --secondary: #22d3ee;
-  --secondary-light: #67e8f9;
-  --secondary-dark: #06b6d4;
+  --bg-dark: #0d1117;
+  --bg-card: #161b22;
+  --bg-elevated: #1c2128;
   
   /* Accent colors */
-  --gold: #fbbf24;
-  --gold-light: #fcd34d;
-  --orange: #f97316;
-  --red: #ef4444;
-  --green: #22c55e;
+  --purple: #6366f1;
+  --purple-light: #818cf8;
+  --purple-dark: #4f46e5;
+  --cyan: #22d3ee;
+  --cyan-light: #67e8f9;
+  --cyan-dark: #06b6d4;
+  
+  /* Legacy gold for compatibility */
+  --gold: #6366f1;
+  --gold-light: #818cf8;
+  --orange: #22d3ee;
+  --orange-light: #67e8f9;
   
   /* Neutral */
   --white: #ffffff;
-  --white-95: rgba(255, 255, 255, 0.95);
   --white-90: rgba(255, 255, 255, 0.9);
-  --white-80: rgba(255, 255, 255, 0.8);
   --white-70: rgba(255, 255, 255, 0.7);
   --white-60: rgba(255, 255, 255, 0.6);
   --white-50: rgba(255, 255, 255, 0.5);
-  --white-30: rgba(255, 255, 255, 0.3);
   --white-20: rgba(255, 255, 255, 0.2);
   --white-10: rgba(255, 255, 255, 0.1);
   --white-05: rgba(255, 255, 255, 0.05);
   
   /* Gradients */
-  --gradient-main: linear-gradient(135deg, var(--bg-deep) 0%, #0f1629 50%, var(--bg-deep) 100%);
+  --gradient-main: linear-gradient(135deg, var(--bg-deep) 0%, #0f1624 50%, var(--bg-deep) 100%);
   --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
-  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-  --gradient-primary-reverse: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
-  --gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(34, 211, 238, 0.5) 100%);
-  --gradient-text: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary) 50%, var(--primary-light) 100%);
+  --gradient-accent: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
+  --gradient-accent-reverse: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
+  --gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(34, 211, 238, 0.4) 100%);
   
   /* Glass effect */
   --glass-bg: rgba(255, 255, 255, 0.03);
-  --glass-bg-strong: rgba(255, 255, 255, 0.08);
+  --glass-bg-hover: rgba(255, 255, 255, 0.08);
   --glass-border: rgba(255, 255, 255, 0.08);
-  --glass-border-glow: rgba(99, 102, 241, 0.3);
+  --glass-border-hover: rgba(99, 102, 241, 0.5);
   
   /* Typography — Hebrew max weight is 600 */
   --font-primary: 'Heebo', 'Rubik', sans-serif;
@@ -67,13 +61,11 @@
   --radius-lg: 20px;
   --radius-xl: 32px;
   --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
-  --shadow-glow-strong: 0 0 60px rgba(99, 102, 241, 0.5);
-  --shadow-cyan: 0 0 40px rgba(34, 211, 238, 0.3);
+  --shadow-glow-cyan: 0 0 40px rgba(34, 211, 238, 0.3);
   
   /* Focus ring */
-  --focus-ring: 0 0 0 4px rgba(99, 102, 241, 0.6);
+  --focus-ring: 0 0 0 4px rgba(99, 102, 241, 0.5);
 }
 
 *, *::before, *::after {
@@ -90,33 +82,36 @@ body {
   font-family: var(--font-primary);
   background: var(--bg-deep);
   color: var(--white);
-  line-height: 1.7;
+  line-height: 1.6;
   min-height: 100vh;
   overflow-x: hidden;
 }
 
-/* Background pattern */
+/* Decorative background elements */
 body::before {
   content: '';
   position: fixed;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background: 
-    radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
-    radial-gradient(ellipse at 80% 80%, rgba(34, 211, 238, 0.06) 0%, transparent 50%),
-    radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 70%);
+    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(34, 211, 238, 0.06) 0%, transparent 50%),
+    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
   pointer-events: none;
   z-index: 0;
 }
 
 /* Focus styles for accessibility */
 :focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--purple);
   outline-offset: 3px;
 }
 
 a:focus-visible,
 button:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--purple);
   outline-offset: 3px;
   border-radius: var(--radius-sm);
 }
@@ -130,8 +125,8 @@ h1, h2, h3, h4, h5, h6 {
   line-height: 1.2;
 }
 
-h1 { font-size: clamp(2.75rem, 7vw, 5rem); }
-h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
+h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
+h2 { font-size: clamp(2rem, 4vw, 3rem); }
 h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
 h4 { font-size: 1.125rem; font-weight: 500; }
 
@@ -155,12 +150,12 @@ ul {
    LAYOUT
 ======================================== */
 .container {
-  position: relative;
-  z-index: 1;
   width: 100%;
   max-width: 1280px;
   margin-inline: auto;
   padding-inline: var(--space-md);
+  position: relative;
+  z-index: 1;
 }
 
 /* ========================================
@@ -196,7 +191,7 @@ ul {
 }
 
 .logo-7 {
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -226,7 +221,7 @@ ul {
   bottom: -2px;
   inset-inline: 0;
   height: 2px;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   transform: scaleX(0);
   transition: var(--transition);
 }
@@ -242,13 +237,13 @@ ul {
 }
 
 .nav-cta {
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   color: var(--white);
   padding: 0.625rem 1.5rem;
   border-radius: var(--radius-sm);
   font-weight: 500;
   font-size: 0.9375rem;
-  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
   position: relative;
   overflow: hidden;
 }
@@ -257,7 +252,7 @@ ul {
   content: '';
   position: absolute;
   inset: 0;
-  background: var(--gradient-primary-reverse);
+  background: var(--gradient-accent-reverse);
   opacity: 0;
   transition: var(--transition);
 }
@@ -265,11 +260,10 @@ ul {
 .nav-cta:hover,
 .nav-cta:focus-visible {
   transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
+  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
 }
 
-.nav-cta:hover::before,
-.nav-cta:focus-visible::before {
+.nav-cta:hover::before {
   opacity: 1;
 }
 
@@ -335,16 +329,16 @@ ul {
 }
 
 .btn-primary {
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   color: var(--white);
-  box-shadow: 0 4px 25px rgba(99, 102, 241, 0.4);
+  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
 }
 
 .btn-primary::before {
   content: '';
   position: absolute;
   inset: 0;
-  background: var(--gradient-primary-reverse);
+  background: var(--gradient-accent-reverse);
   opacity: 0;
   transition: var(--transition);
 }
@@ -352,11 +346,10 @@ ul {
 .btn-primary:hover,
 .btn-primary:focus-visible {
   transform: translateY(-3px);
-  box-shadow: 0 8px 40px rgba(99, 102, 241, 0.6);
+  box-shadow: 0 8px 35px rgba(99, 102, 241, 0.6);
 }
 
-.btn-primary:hover::before,
-.btn-primary:focus-visible::before {
+.btn-primary:hover::before {
   opacity: 1;
 }
 
@@ -368,23 +361,23 @@ ul {
 .btn-glow::after {
   content: '';
   position: absolute;
-  inset: -4px;
-  background: var(--gradient-primary);
+  inset: -3px;
+  background: var(--gradient-accent);
   border-radius: inherit;
   filter: blur(20px);
-  opacity: 0.4;
+  opacity: 0.5;
   z-index: -1;
   transition: var(--transition);
 }
 
 .btn-glow:hover::after,
 .btn-glow:focus-visible::after {
-  opacity: 0.7;
+  opacity: 0.8;
   filter: blur(25px);
 }
 
 .btn-secondary {
-  background: var(--glass-bg-strong);
+  background: var(--glass-bg);
   color: var(--white);
   border: 1px solid var(--glass-border);
   backdrop-filter: blur(10px);
@@ -392,11 +385,12 @@ ul {
 
 .btn-secondary:hover,
 .btn-secondary:focus-visible {
-  background: var(--white-10);
-  border-color: var(--primary);
-  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
+  background: var(--glass-bg-hover);
+  border-color: var(--purple);
+  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
 }
 
+/* RTL-aware arrow animation */
 .btn-icon-arrow {
   transform: scaleX(-1);
 }
@@ -436,7 +430,6 @@ ul {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  overflow: hidden;
 }
 
 .glow {
@@ -449,68 +442,56 @@ ul {
 .glow-1 {
   width: 700px;
   height: 700px;
-  background: rgba(99, 102, 241, 0.3);
+  background: rgba(99, 102, 241, 0.15);
   top: -300px;
   inset-inline-end: -200px;
-  animation: float 8s ease-in-out infinite;
 }
 
 .glow-2 {
   width: 500px;
   height: 500px;
-  background: rgba(34, 211, 238, 0.2);
+  background: rgba(34, 211, 238, 0.12);
   bottom: -150px;
   inset-inline-start: -150px;
-  animation: float 10s ease-in-out infinite reverse;
 }
 
 .glow-3 {
   width: 400px;
   height: 400px;
-  background: rgba(139, 92, 246, 0.15);
+  background: rgba(99, 102, 241, 0.1);
   top: 40%;
-  inset-inline-start: 40%;
-  animation: float 12s ease-in-out infinite;
+  inset-inline-start: 20%;
 }
 
-@keyframes float {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  50% { transform: translate(30px, -30px) scale(1.1); }
-}
-
-/* Geometric shapes */
-.hero-bg-effects::before {
+/* Decorative geometric shapes */
+.hero::before {
   content: '';
   position: absolute;
-  width: 300px;
-  height: 300px;
-  border: 1px solid rgba(99, 102, 241, 0.2);
-  border-radius: 50%;
   top: 20%;
   inset-inline-end: 10%;
-  animation: rotate 30s linear infinite;
+  width: 300px;
+  height: 300px;
+  border: 1px solid var(--glass-border);
+  border-radius: 50%;
+  opacity: 0.3;
+  pointer-events: none;
 }
 
-.hero-bg-effects::after {
+.hero::after {
   content: '';
   position: absolute;
+  bottom: 15%;
+  inset-inline-start: 5%;
   width: 200px;
   height: 200px;
-  border: 1px solid rgba(34, 211, 238, 0.15);
-  top: 60%;
-  inset-inline-start: 5%;
+  border: 1px solid rgba(34, 211, 238, 0.2);
   transform: rotate(45deg);
-  animation: rotate 25s linear infinite reverse;
-}
-
-@keyframes rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  opacity: 0.3;
+  pointer-events: none;
 }
 
 .hero-content {
   position: relative;
-  z-index: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-2xl);
@@ -519,6 +500,7 @@ ul {
   max-width: 1280px;
   margin-inline: auto;
   padding-inline: var(--space-md);
+  z-index: 1;
 }
 
 .hero-text {
@@ -529,12 +511,12 @@ ul {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  background: var(--glass-bg-strong);
-  border: 1px solid var(--glass-border-glow);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   padding: 0.5rem 1rem;
   border-radius: 100px;
   font-size: 0.875rem;
-  color: var(--white-80);
+  color: var(--white-70);
   margin-bottom: var(--space-md);
   backdrop-filter: blur(10px);
 }
@@ -542,10 +524,10 @@ ul {
 .badge-dot {
   width: 8px;
   height: 8px;
-  background: var(--green);
+  background: var(--cyan);
   border-radius: 50%;
   animation: pulse 2s infinite;
-  box-shadow: 0 0 10px var(--green);
+  box-shadow: 0 0 10px var(--cyan);
 }
 
 @keyframes pulse {
@@ -557,26 +539,20 @@ ul {
   display: block;
   font-size: clamp(4.5rem, 14vw, 8rem);
   font-weight: 600;
-  background: var(--gradient-text);
-  background-size: 200% auto;
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   letter-spacing: -0.02em;
-  animation: shimmer 3s linear infinite;
-}
-
-@keyframes shimmer {
-  from { background-position: 200% center; }
-  to { background-position: -200% center; }
+  text-shadow: 0 0 80px rgba(99, 102, 241, 0.5);
 }
 
 .hero-tagline {
   display: block;
   font-weight: 500;
-  color: var(--white-95);
-  margin-top: var(--space-xs);
+  color: var(--white);
+  margin-top: var(--space-sm);
   font-size: clamp(1.5rem, 3vw, 2rem);
 }
 
@@ -584,14 +560,14 @@ ul {
   font-size: 1.125rem;
   margin-top: var(--space-md);
   max-width: 48ch;
-  color: var(--white-70);
+  color: var(--white-60);
   line-height: 1.8;
 }
 
 .hero-ctas {
   display: flex;
   gap: var(--space-sm);
-  margin-top: var(--space-lg);
+  margin-top: var(--space-xl);
   flex-wrap: wrap;
 }
 
@@ -612,7 +588,7 @@ ul {
   font-family: var(--font-display);
   font-size: 2rem;
   font-weight: 600;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -620,7 +596,7 @@ ul {
 
 .stat-label {
   font-size: 0.875rem;
-  color: var(--white-70);
+  color: var(--white-60);
 }
 
 /* Phone Mockup */
@@ -638,13 +614,13 @@ ul {
   position: relative;
   width: 300px;
   height: 600px;
-  background: linear-gradient(145deg, #1a1f35 0%, #0d1020 100%);
+  background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
   border-radius: 44px;
   padding: 12px;
   box-shadow: 
     0 60px 120px rgba(0, 0, 0, 0.6),
-    0 0 0 1px rgba(255, 255, 255, 0.1),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+    0 0 60px rgba(99, 102, 241, 0.15),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .phone-notch {
@@ -666,14 +642,13 @@ ul {
 .phone-screen {
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
+  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
   border-radius: 36px;
   overflow: hidden;
   padding: var(--space-md);
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
-  border: 1px solid var(--glass-border);
 }
 
 .screen-header {
@@ -687,20 +662,20 @@ ul {
   font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 600;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
 .screen-balance {
-  background: var(--glass-bg-strong);
+  background: var(--glass-bg);
   padding: 0.5rem 0.75rem;
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 500;
   border: 1px solid var(--glass-border);
-  color: var(--secondary);
+  color: var(--cyan);
 }
 
 .screen-live-badge {
@@ -714,7 +689,6 @@ ul {
   font-size: 0.75rem;
   font-weight: 600;
   align-self: flex-start;
-  border: 1px solid rgba(239, 68, 68, 0.3);
 }
 
 .live-dot {
@@ -723,12 +697,11 @@ ul {
   background: #ef4444;
   border-radius: 50%;
   animation: pulse 1.5s infinite;
-  box-shadow: 0 0 8px #ef4444;
 }
 
 .screen-match {
-  background: var(--glass-bg-strong);
-  border: 1px solid var(--glass-border-glow);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   padding: var(--space-sm);
 }
@@ -745,7 +718,7 @@ ul {
 .match-score {
   font-size: 1.125rem;
   font-weight: 600;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -764,14 +737,10 @@ ul {
   border-radius: var(--radius-sm);
   font-size: 0.875rem;
   font-weight: 500;
-  border: 1px solid transparent;
-  transition: var(--transition);
 }
 
 .odd.active {
-  background: var(--gradient-primary);
-  border-color: var(--primary);
-  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
+  background: var(--gradient-accent);
 }
 
 .screen-games {
@@ -784,7 +753,7 @@ ul {
 .game-icon {
   width: 52px;
   height: 52px;
-  background: var(--glass-bg-strong);
+  background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   display: flex;
@@ -794,8 +763,8 @@ ul {
 }
 
 .game-icon:hover {
-  border-color: var(--primary);
-  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
+  border-color: var(--purple);
+  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
 }
 
 .game-icon svg {
@@ -805,7 +774,7 @@ ul {
 
 .phone-glow {
   position: absolute;
-  inset: -60px;
+  inset: -80px;
   background: radial-gradient(circle at center, rgba(99, 102, 241, 0.2) 0%, transparent 60%);
   pointer-events: none;
   z-index: -1;
@@ -815,9 +784,8 @@ ul {
    SECTIONS COMMON
 ======================================== */
 section {
-  position: relative;
   padding: var(--space-3xl) 0;
-  z-index: 1;
+  position: relative;
 }
 
 .section-header {
@@ -829,42 +797,46 @@ section {
 }
 
 .section-header.centered p {
-  max-width: 550px;
+  max-width: 500px;
   margin-inline: auto;
   margin-top: var(--space-sm);
 }
 
 .section-tag {
   display: inline-block;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-size: 0.875rem;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.15em;
+  letter-spacing: 0.1em;
   margin-bottom: var(--space-xs);
 }
 
-/* Decorative line */
+/* Decorative line under section headers */
 .section-header h2 {
   position: relative;
   display: inline-block;
 }
 
-.section-header.centered h2::after {
+.section-header h2::after {
   content: '';
   position: absolute;
-  bottom: -12px;
-  inset-inline-start: 50%;
-  transform: translateX(50%);
+  bottom: -10px;
+  inset-inline-start: 0;
   width: 60px;
   height: 3px;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   border-radius: 2px;
 }
 
+.section-header.centered h2::after {
+  inset-inline-start: 50%;
+  transform: translateX(50%);
+}
+
 [dir="ltr"] .section-header.centered h2::after {
   transform: translateX(-50%);
 }
@@ -874,13 +846,18 @@ section {
 ======================================== */
 .features {
   background: transparent;
+  position: relative;
 }
 
 .features::before {
   content: '';
   position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 800px;
+  height: 800px;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
   pointer-events: none;
 }
 
@@ -911,7 +888,7 @@ section {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
+  background: var(--gradient-accent);
   opacity: 0;
   transition: var(--transition);
 }
@@ -919,17 +896,18 @@ section {
 .feature-card:hover,
 .feature-card:focus-within {
   transform: translateY(-8px);
-  border-color: var(--primary);
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(99, 102, 241, 0.2);
+  border-color: var(--purple);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.3),
+    0 0 30px rgba(99, 102, 241, 0.15);
 }
 
-.feature-card:hover::before,
-.feature-card:focus-within::before {
-  opacity: 1;
+.feature-card:hover::before {
+  opacity: 0.03;
 }
 
 .feature-card.featured {
-  background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(34, 211, 238, 0.05) 100%);
+  background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.02) 100%);
   border-color: rgba(99, 102, 241, 0.3);
 }
 
@@ -937,7 +915,7 @@ section {
   position: absolute;
   top: -10px;
   inset-inline-end: var(--space-md);
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   color: var(--white);
   padding: 0.25rem 0.75rem;
   border-radius: 100px;
@@ -947,23 +925,23 @@ section {
 }
 
 .feature-icon {
+  position: relative;
   width: 60px;
   height: 60px;
-  background: var(--glass-bg-strong);
+  background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--space-md);
-  color: var(--secondary);
+  color: var(--cyan);
   transition: var(--transition);
 }
 
-.feature-card:hover .feature-icon,
-.feature-card:focus-within .feature-icon {
-  border-color: var(--secondary);
-  box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
+.feature-card:hover .feature-icon {
+  border-color: var(--cyan);
+  box-shadow: 0 0 25px rgba(34, 211, 238, 0.3);
 }
 
 .feature-icon svg {
@@ -972,15 +950,14 @@ section {
 }
 
 .feature-card h3 {
+  position: relative;
   margin-bottom: var(--space-xs);
   font-weight: 500;
-  color: var(--white-95);
 }
 
 .feature-card p {
-  font-size: 0.9375rem;
   position: relative;
-  z-index: 1;
+  font-size: 0.9375rem;
 }
 
 /* ========================================
@@ -993,12 +970,11 @@ section {
 .sports::before {
   content: '';
   position: absolute;
-  inset-inline-end: 0;
-  top: 50%;
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
-  transform: translateY(-50%);
+  top: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(ellipse at 0% 50%, rgba(34, 211, 238, 0.06) 0%, transparent 50%);
   pointer-events: none;
 }
 
@@ -1034,25 +1010,24 @@ section {
 .sport-item:hover,
 .sport-item:focus-visible,
 .sport-item.active {
-  background: var(--glass-bg-strong);
-  border-color: var(--primary);
+  background: var(--glass-bg-hover);
+  border-color: var(--purple);
 }
 
 .sport-item.active {
-  box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 0 35px rgba(99, 102, 241, 0.2);
 }
 
 .sport-icon {
   width: 52px;
   height: 52px;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   flex-shrink: 0;
-  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
 }
 
 .sport-icon svg {
@@ -1070,7 +1045,6 @@ section {
 .sport-title {
   font-weight: 500;
   font-size: 1rem;
-  color: var(--white-95);
 }
 
 .sport-subtitle {
@@ -1091,7 +1065,7 @@ section {
 .sport-item:hover .sport-arrow,
 .sport-item:focus-visible .sport-arrow,
 .sport-item.active .sport-arrow {
-  color: var(--secondary);
+  color: var(--cyan);
   transform: translateX(-4px);
 }
 
@@ -1109,11 +1083,13 @@ section {
 
 .live-match-card {
   background: var(--glass-bg);
-  border: 1px solid var(--glass-border-glow);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-xl);
   padding: var(--space-lg);
-  backdrop-filter: blur(30px);
-  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 40px rgba(99, 102, 241, 0.1);
+  backdrop-filter: blur(20px);
+  box-shadow: 
+    0 30px 60px rgba(0, 0, 0, 0.4),
+    0 0 40px rgba(99, 102, 241, 0.1);
 }
 
 .match-header {
@@ -1133,7 +1109,6 @@ section {
   border-radius: 100px;
   font-size: 0.875rem;
   font-weight: 600;
-  border: 1px solid rgba(239, 68, 68, 0.3);
 }
 
 .live-pulse {
@@ -1142,11 +1117,10 @@ section {
   background: #ef4444;
   border-radius: 50%;
   animation: pulse 1.5s infinite;
-  box-shadow: 0 0 10px #ef4444;
 }
 
 .match-time {
-  color: var(--white-70);
+  color: var(--white-60);
   font-size: 1.25rem;
   font-weight: 500;
 }
@@ -1168,8 +1142,8 @@ section {
 }
 
 .team-badge {
-  width: 68px;
-  height: 68px;
+  width: 64px;
+  height: 64px;
 }
 
 .team-badge svg {
@@ -1181,7 +1155,6 @@ section {
   font-size: 0.9375rem;
   font-weight: 500;
   text-align: center;
-  color: var(--white-90);
 }
 
 .score-box {
@@ -1193,7 +1166,7 @@ section {
 .score {
   font-size: 3.5rem;
   font-weight: 600;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1216,7 +1189,7 @@ section {
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
-  background: var(--glass-bg-strong);
+  background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   padding: var(--space-sm);
@@ -1228,15 +1201,14 @@ section {
 
 .odd-btn:hover,
 .odd-btn:focus-visible {
-  border-color: var(--primary);
-  background: var(--white-10);
-  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
+  border-color: var(--purple);
+  background: var(--glass-bg-hover);
+  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
 }
 
 .odd-btn.highlighted {
-  background: var(--gradient-primary);
-  border-color: var(--primary);
-  box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
+  background: var(--gradient-accent);
+  border-color: var(--purple);
 }
 
 .odd-label {
@@ -1246,7 +1218,7 @@ section {
 }
 
 .odd-btn.highlighted .odd-label {
-  color: var(--white-80);
+  color: var(--white-70);
 }
 
 .odd-value {
@@ -1265,9 +1237,12 @@ section {
 .casino::before {
   content: '';
   position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse at 30% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
-              radial-gradient(ellipse at 70% 80%, rgba(34, 211, 238, 0.06) 0%, transparent 40%);
+  top: 50%;
+  inset-inline-end: 0;
+  transform: translateY(-50%);
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
   pointer-events: none;
 }
 
@@ -1289,37 +1264,23 @@ section {
   border-radius: var(--radius-lg);
   overflow: hidden;
   transition: var(--transition);
-  position: relative;
-}
-
-.game-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, transparent 40%);
-  opacity: 0;
-  transition: var(--transition);
-  pointer-events: none;
 }
 
 .game-card:hover,
 .game-card:focus-within {
   transform: translateY(-10px);
-  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.2);
-  border-color: var(--primary);
-}
-
-.game-card:hover::before,
-.game-card:focus-within::before {
-  opacity: 1;
+  box-shadow: 
+    0 30px 60px rgba(0, 0, 0, 0.4),
+    0 0 40px rgba(99, 102, 241, 0.15);
+  border-color: var(--purple);
 }
 
 .game-visual {
-  height: 180px;
+  height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
+  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%);
   position: relative;
   overflow: hidden;
 }
@@ -1328,13 +1289,11 @@ section {
   content: '';
   position: absolute;
   inset: 0;
-  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
+  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
 }
 
 .game-visual svg {
   transition: var(--transition);
-  position: relative;
-  z-index: 1;
 }
 
 .game-card:hover .game-visual svg,
@@ -1358,14 +1317,11 @@ section {
 
 .game-info {
   padding: var(--space-md);
-  position: relative;
-  z-index: 1;
 }
 
 .game-info h3 {
   margin-bottom: var(--space-xs);
   font-weight: 500;
-  color: var(--white-95);
 }
 
 .game-info p {
@@ -1377,7 +1333,7 @@ section {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1389,7 +1345,8 @@ section {
   content: '←';
   transition: var(--transition);
   display: inline-block;
-  -webkit-text-fill-color: var(--secondary);
+  -webkit-background-clip: text;
+  background-clip: text;
 }
 
 [dir="ltr"] .game-link::after {
@@ -1418,8 +1375,7 @@ section {
   content: '';
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
-              radial-gradient(ellipse at 80% 30%, rgba(34, 211, 238, 0.1) 0%, transparent 40%);
+  background: radial-gradient(ellipse at 30% 50%, rgba(34, 211, 238, 0.1) 0%, transparent 60%);
   pointer-events: none;
 }
 
@@ -1439,7 +1395,7 @@ section {
 }
 
 .bonuses-content h2 .highlight {
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1447,8 +1403,7 @@ section {
 
 .bonuses-content > p {
   font-size: 1.125rem;
-  max-width: 48ch;
-  line-height: 1.8;
+  max-width: 44ch;
 }
 
 .bonus-features {
@@ -1470,89 +1425,85 @@ section {
 .bonus-features svg {
   width: 22px;
   height: 22px;
-  color: var(--secondary);
+  color: var(--cyan);
   flex-shrink: 0;
 }
 
-/* Bonus Cards Visual */
+/* Bonus Cards Visual - FIXED: Horizontal row layout */
 .bonuses-visual {
   display: flex;
   justify-content: center;
+  align-items: center;
   padding: var(--space-lg);
 }
 
 .bonus-card-stack {
-  position: relative;
-  width: 300px;
-  height: 360px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+  gap: var(--space-md);
+  width: 100%;
 }
 
 .bonus-card {
-  position: absolute;
-  width: 240px;
-  height: 140px;
+  flex: 1;
+  max-width: 180px;
+  min-height: 140px;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
-  backdrop-filter: blur(30px);
+  backdrop-filter: blur(20px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: var(--space-md);
   transition: var(--transition);
 }
 
 .bc-1 {
-  top: 0;
-  inset-inline-start: 0;
-  background: linear-gradient(145deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
-  border-color: rgba(99, 102, 241, 0.3);
-  z-index: 3;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(99, 102, 241, 0.2);
+  background: linear-gradient(145deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.02) 100%);
+  border-color: rgba(99, 102, 241, 0.4);
 }
 
 .bc-2 {
-  top: 90px;
-  inset-inline-start: 30px;
-  background: linear-gradient(145deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
-  border-color: rgba(34, 211, 238, 0.3);
-  z-index: 2;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(34, 211, 238, 0.2);
+  background: linear-gradient(145deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.02) 100%);
+  border-color: rgba(34, 211, 238, 0.4);
 }
 
 .bc-3 {
-  top: 180px;
-  inset-inline-start: 60px;
-  background: linear-gradient(145deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
-  border-color: rgba(251, 191, 36, 0.3);
-  z-index: 1;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 30px rgba(251, 191, 36, 0.15);
+  background: linear-gradient(145deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.02) 100%);
+  border-color: rgba(139, 92, 246, 0.4);
 }
 
 .bonus-card:hover {
-  transform: translateY(-10px) rotate(-2deg);
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
 
 .bc-amount {
   font-family: var(--font-display);
-  font-size: 2.25rem;
+  font-size: 2rem;
   font-weight: 600;
   color: var(--white);
   margin-bottom: 0.25rem;
+  text-align: center;
 }
 
 .bc-1 .bc-amount { 
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
-.bc-2 .bc-amount { color: var(--secondary); }
-.bc-3 .bc-amount { color: var(--gold); }
+.bc-2 .bc-amount { color: var(--cyan); }
+.bc-3 .bc-amount { color: #a78bfa; }
 
 .bc-label {
-  font-size: 0.9375rem;
-  color: var(--white-70);
+  font-size: 0.875rem;
+  color: var(--white-60);
+  text-align: center;
 }
 
 /* ========================================
@@ -1565,8 +1516,10 @@ section {
 .download::before {
   content: '';
   position: absolute;
-  inset: 0;
-  background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 50%, transparent 100%);
+  bottom: 0;
+  inset-inline: 0;
+  height: 60%;
+  background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 100%);
   pointer-events: none;
 }
 
@@ -1590,38 +1543,39 @@ section {
 
 .download-phone {
   position: absolute;
-  width: 200px;
-  height: 400px;
-  background: linear-gradient(145deg, #1a1f35 0%, #0d1020 100%);
-  border-radius: 32px;
+  width: 220px;
+  height: 440px;
+  background: linear-gradient(145deg, #1a1f2e 0%, #0d1117 100%);
+  border-radius: 36px;
   padding: 8px;
-  box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
+  box-shadow: 
+    0 50px 100px rgba(0,0,0,0.5),
+    0 0 40px rgba(99, 102, 241, 0.1);
 }
 
 .phone-1 {
-  inset-inline-end: 40%;
+  inset-inline-end: 45%;
   top: 60px;
-  transform: rotate(-5deg);
+  transform: rotate(-8deg);
   z-index: 1;
 }
 
 .phone-2 {
-  inset-inline-start: 40%;
-  top: 10px;
-  transform: rotate(5deg);
+  inset-inline-start: 45%;
+  top: 0;
+  transform: rotate(8deg);
   z-index: 2;
 }
 
 .dp-screen {
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
-  border-radius: 26px;
+  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
+  border-radius: 30px;
   padding: var(--space-sm);
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
-  border: 1px solid var(--glass-border);
 }
 
 .dp-header {
@@ -1633,7 +1587,7 @@ section {
   font-family: var(--font-display);
   font-size: 1rem;
   font-weight: 600;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1654,14 +1608,11 @@ section {
   border-radius: var(--radius-sm);
   padding: 0.75rem;
   font-size: 0.75rem;
-  color: var(--white-80);
-  transition: var(--transition);
 }
 
 .dp-menu-item.active {
-  background: var(--gradient-primary);
-  border-color: var(--primary);
-  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
+  background: var(--gradient-accent);
+  border-color: var(--purple);
 }
 
 .dp-menu-item svg {
@@ -1681,7 +1632,6 @@ section {
   font-weight: 600;
   align-self: flex-start;
   margin-top: var(--space-md);
-  border: 1px solid rgba(239, 68, 68, 0.3);
 }
 
 .dp-live-dot {
@@ -1690,7 +1640,6 @@ section {
   background: #ef4444;
   border-radius: 50%;
   animation: pulse 1.5s infinite;
-  box-shadow: 0 0 6px #ef4444;
 }
 
 .dp-game {
@@ -1701,39 +1650,39 @@ section {
 }
 
 .dp-roulette-wheel {
-  width: 100px;
-  height: 100px;
+  width: 110px;
+  height: 110px;
   background: conic-gradient(
     #6366f1 0deg 20deg,
-    #1a1a1a 20deg 40deg,
+    #1a1a2e 20deg 40deg,
     #22d3ee 40deg 60deg,
-    #1a1a1a 60deg 80deg,
+    #1a1a2e 60deg 80deg,
     #6366f1 80deg 100deg,
-    #1a1a1a 100deg 120deg,
+    #1a1a2e 100deg 120deg,
     #22d3ee 120deg 140deg,
-    #1a1a1a 140deg 160deg,
+    #1a1a2e 140deg 160deg,
     #6366f1 160deg 180deg,
-    #1a1a1a 180deg 200deg,
+    #1a1a2e 180deg 200deg,
     #22d3ee 200deg 220deg,
-    #1a1a1a 220deg 240deg,
+    #1a1a2e 220deg 240deg,
     #6366f1 240deg 260deg,
-    #1a1a1a 260deg 280deg,
+    #1a1a2e 260deg 280deg,
     #22d3ee 280deg 300deg,
-    #1a1a1a 300deg 320deg,
+    #1a1a2e 300deg 320deg,
     #6366f1 320deg 340deg,
-    #1a1a1a 340deg 360deg
+    #1a1a2e 340deg 360deg
   );
   border-radius: 50%;
-  border: 4px solid var(--secondary);
+  border: 4px solid var(--purple);
+  box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
   animation: spin 8s linear infinite;
-  box-shadow: 0 0 30px rgba(34, 211, 238, 0.3);
 }
 
 .dp-bet-amount {
   text-align: center;
-  font-size: 1rem;
+  font-size: 1.125rem;
   font-weight: 600;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1754,7 +1703,6 @@ section {
 .download-content > p {
   font-size: 1.125rem;
   margin-bottom: var(--space-lg);
-  line-height: 1.8;
 }
 
 .download-buttons {
@@ -1776,10 +1724,10 @@ section {
 
 .download-btn:hover,
 .download-btn:focus-visible {
-  background: var(--glass-bg-strong);
-  border-color: var(--primary);
+  background: var(--glass-bg-hover);
+  border-color: var(--purple);
   transform: translateX(-4px);
-  box-shadow: 0 0 25px rgba(99, 102, 241, 0.3);
+  box-shadow: 0 0 25px rgba(99, 102, 241, 0.2);
 }
 
 [dir="ltr"] .download-btn:hover,
@@ -1788,9 +1736,9 @@ section {
 }
 
 .store-icon {
-  width: 36px;
-  height: 36px;
-  color: var(--secondary);
+  width: 32px;
+  height: 32px;
+  color: var(--white);
 }
 
 .btn-text {
@@ -1806,7 +1754,6 @@ section {
 .btn-text .large {
   font-size: 1rem;
   font-weight: 500;
-  color: var(--white-95);
 }
 
 .download-features {
@@ -1821,14 +1768,14 @@ section {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--white-70);
+  color: var(--white-60);
   font-size: 0.875rem;
 }
 
 .df-item svg {
-  width: 20px;
-  height: 20px;
-  color: var(--secondary);
+  width: 18px;
+  height: 18px;
+  color: var(--cyan);
 }
 
 /* ========================================
@@ -1840,25 +1787,40 @@ section {
 
 .support-card {
   background: var(--glass-bg);
-  border: 1px solid var(--glass-border-glow);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-xl);
   padding: var(--space-xl);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--space-lg);
-  backdrop-filter: blur(30px);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(99, 102, 241, 0.1);
+  backdrop-filter: blur(20px);
+  position: relative;
+  overflow: hidden;
+}
+
+.support-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--gradient-accent);
+  opacity: 0.03;
+  pointer-events: none;
 }
 
 .support-content h3 {
+  position: relative;
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
   font-weight: 500;
-  color: var(--white-95);
+}
+
+.support-content p {
+  position: relative;
 }
 
 .support-channels {
+  position: relative;
   display: flex;
   gap: var(--space-sm);
 }
@@ -1867,13 +1829,12 @@ section {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  background: var(--glass-bg-strong);
+  background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   padding: 0.75rem 1.25rem;
   font-weight: 500;
   transition: var(--transition);
-  color: var(--white-90);
 }
 
 .support-btn svg {
@@ -1883,34 +1844,34 @@ section {
 
 .support-btn:hover,
 .support-btn:focus-visible {
-  background: var(--white-10);
-  box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
+  background: var(--glass-bg-hover);
 }
 
 .support-btn.whatsapp:hover,
 .support-btn.whatsapp:focus-visible {
   background: rgba(37, 211, 102, 0.15);
   border-color: #25d366;
-  box-shadow: 0 0 20px rgba(37, 211, 102, 0.3);
+  box-shadow: 0 0 20px rgba(37, 211, 102, 0.2);
 }
 
 .support-btn.telegram:hover,
 .support-btn.telegram:focus-visible {
   background: rgba(0, 136, 204, 0.15);
   border-color: #0088cc;
-  box-shadow: 0 0 20px rgba(0, 136, 204, 0.3);
+  box-shadow: 0 0 20px rgba(0, 136, 204, 0.2);
 }
 
 .support-btn.chat:hover,
 .support-btn.chat:focus-visible {
-  border-color: var(--primary);
+  border-color: var(--purple);
+  box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
 }
 
 /* ========================================
    FOOTER
 ======================================== */
 .site-footer {
-  background: rgba(5, 8, 15, 0.95);
+  background: rgba(8, 10, 15, 0.95);
   border-top: 1px solid var(--glass-border);
   padding: var(--space-2xl) 0 var(--space-lg);
   position: relative;
@@ -1922,7 +1883,7 @@ section {
   top: 0;
   inset-inline: 0;
   height: 1px;
-  background: var(--gradient-primary);
+  background: var(--gradient-accent);
   opacity: 0.5;
 }
 
@@ -1935,7 +1896,7 @@ section {
 }
 
 .footer-brand {
-  max-width: 300px;
+  max-width: 280px;
 }
 
 .footer-logo {
@@ -1948,9 +1909,15 @@ section {
   margin-bottom: var(--space-sm);
 }
 
+.footer-logo .logo-7 {
+  background: var(--gradient-accent);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 .footer-brand p {
   font-size: 0.9375rem;
-  line-height: 1.7;
 }
 
 .footer-links {
@@ -1960,7 +1927,7 @@ section {
 }
 
 .footer-col h4 {
-  color: var(--white-95);
+  color: var(--white);
   margin-bottom: var(--space-sm);
   font-weight: 500;
 }
@@ -1979,7 +1946,7 @@ section {
 
 .footer-col a:hover,
 .footer-col a:focus-visible {
-  color: var(--secondary);
+  color: var(--cyan);
 }
 
 .footer-bottom {
@@ -2011,33 +1978,32 @@ section {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 38px;
+  height: 38px;
   background: rgba(239, 68, 68, 0.15);
   border: 2px solid #ef4444;
   border-radius: 50%;
   color: #ef4444;
   font-weight: 600;
   font-size: 0.875rem;
-  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
 }
 
 .badge-secure {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  background: var(--glass-bg-strong);
+  background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   padding: 0.5rem 0.75rem;
   border-radius: var(--radius-sm);
   font-size: 0.8125rem;
-  color: var(--white-70);
+  color: var(--white-60);
 }
 
 .badge-secure svg {
-  width: 18px;
-  height: 18px;
-  color: var(--green);
+  width: 16px;
+  height: 16px;
+  color: var(--cyan);
 }
 
 /* ========================================
@@ -2132,22 +2098,19 @@ section {
     order: -1;
   }
   
+  /* Bonus cards - vertical column on mobile */
   .bonus-card-stack {
-    height: 280px;
-    width: 100%;
-    max-width: 300px;
-    margin-inline: auto;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-sm);
   }
   
   .bonus-card {
-    width: 200px;
-    height: 110px;
+    max-width: 280px;
+    width: 100%;
+    min-height: 120px;
   }
   
-  .bc-1 { top: 0; inset-inline-start: 0; }
-  .bc-2 { top: 70px; inset-inline-start: 25px; }
-  .bc-3 { top: 140px; inset-inline-start: 50px; }
-  
   .bc-amount {
     font-size: 1.75rem;
   }
@@ -2196,6 +2159,10 @@ section {
     flex-wrap: wrap;
     justify-content: center;
   }
+
+  .section-header.centered h2::after {
+    display: none;
+  }
 }
 
 @media (max-width: 480px) {
@@ -2208,10 +2175,6 @@ section {
     font-size: 4rem;
   }
   
-  .hero-tagline {
-    font-size: 1.25rem;
-  }
-  
   .hero-stats {
     flex-direction: column;
     gap: var(--space-md);
@@ -2242,6 +2205,17 @@ section {
     flex-direction: column;
     align-items: center;
   }
+  
+  /* Bonus cards - smaller on very small screens */
+  .bonus-card {
+    max-width: 100%;
+    min-height: 100px;
+    padding: var(--space-sm);
+  }
+  
+  .bc-amount {
+    font-size: 1.5rem;
+  }
 }
 
 /* Reduced Motion */
@@ -2261,11 +2235,7 @@ section {
   .badge-dot,
   .live-dot,
   .live-pulse,
-  .dp-live-dot,
-  .glow,
-  .hero-7xl,
-  .hero-bg-effects::before,
-  .hero-bg-effects::after {
+  .dp-live-dot {
     animation: none !important;
   }
 }