diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 6fd62d9..9563472 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -82,9 +82,9 @@ export default function Index() {
           </div>
           <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger">
             {classes.map((c, i) => (
-              <Card key={i} className={`bg-slate-900/80 backdrop-blur border \${c.border} hover:border-orange-500/40 transition-all duration-300 group hover:-translate-y-1`}>
+              <Card key={i} className={`bg-slate-900/80 backdrop-blur border ${c.border} hover:border-orange-500/40 transition-all duration-300 group hover:-translate-y-1`}>
                 <CardContent className="p-6">
-                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-br \${c.gradient} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
+                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${c.gradient} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                     <c.icon className="h-6 w-6 text-orange-400" />
                   </div>
                   <h3 className="font-bold text-white text-lg mb-2">{c.title}</h3>
@@ -141,7 +141,7 @@ export default function Index() {
               { name: "Pro", price: "$59", features: ["Unlimited classes", "Sauna & pool", "1 PT session/mo", "Nutrition plan", "Guest passes"], popular: true },
               { name: "Elite", price: "$99", features: ["Everything in Pro", "Unlimited PT sessions", "Recovery suite", "Priority booking", "Merch discount", "24/7 access"], popular: false },
             ].map((tier, i) => (
-              <Card key={i} className={`relative bg-slate-900/80 backdrop-blur border transition-all duration-300 hover:-translate-y-1 \${tier.popular ? "border-orange-500/50 shadow-xl shadow-orange-500/10 scale-105" : "border-slate-800 hover:border-slate-700"}`}>
+              <Card key={i} className={`relative bg-slate-900/80 backdrop-blur border transition-all duration-300 hover:-translate-y-1 ${tier.popular ? "border-orange-500/50 shadow-xl shadow-orange-500/10 scale-105" : "border-slate-800 hover:border-slate-700"}`}>
                 {tier.popular && <div className="absolute -top-3 left-1/2 -translate-x-1/2"><Badge className="bg-gradient-to-r from-orange-500 to-red-500 text-white border-0 uppercase text-xs tracking-wider px-4">Most Popular</Badge></div>}
                 <CardContent className="p-8 text-center">
                   <h3 className="text-lg font-bold uppercase text-slate-300">{tier.name}</h3>
@@ -157,7 +157,7 @@ export default function Index() {
                       </div>
                     ))}
                   </div>
-                  <Button asChild className={`w-full font-bold uppercase tracking-wide rounded-full active:scale-[0.97] transition-all \${tier.popular ? "bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white shadow-lg shadow-orange-500/25" : "bg-slate-800 hover:bg-slate-700 text-white"}`}>
+                  <Button asChild className={`w-full font-bold uppercase tracking-wide rounded-full active:scale-[0.97] transition-all ${tier.popular ? "bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white shadow-lg shadow-orange-500/25" : "bg-slate-800 hover:bg-slate-700 text-white"}`}>
                     <Link to="/pricing">Get Started</Link>
                   </Button>
                 </CardContent>
@@ -178,7 +178,7 @@ export default function Index() {
             {trainers.map((t, i) => (
               <Card key={i} className="bg-slate-900/80 backdrop-blur border border-slate-800 hover:border-orange-500/30 transition-all duration-300 group hover:-translate-y-1">
                 <CardContent className="p-6 text-center">
-                  <div className={`w-20 h-20 rounded-full bg-gradient-to-br \${t.gradient} mx-auto mb-4 flex items-center justify-center text-2xl font-black text-white shadow-lg`}>
+                  <div className={`w-20 h-20 rounded-full bg-gradient-to-br ${t.gradient} mx-auto mb-4 flex items-center justify-center text-2xl font-black text-white shadow-lg`}>
                     {t.name.split(" ").map(n => n[0]).join("")}
                   </div>
                   <h3 className="font-bold text-white text-lg">{t.name}</h3>