chore: update footer text, enhance rate card layout, and refine styles

styles/globals.scss

@@ -6,16 +6,16 @@
 }
 
 :root {
-  --color-primary: #0a0a0a;
-  --color-secondary: #1a1a1a;
-  --color-accent: #fef3c7;
-  --color-accent-hover: #fde68a;
-  --color-background: #fffef0;
-  --color-surface: #fefce8;
-  --color-border: #fde68a;
-  --color-text: #0a0a0a;
-  --color-text-muted: #525252;
-  --color-success: #fbbf24;
+  --color-primary: #2563eb;
+  --color-secondary: #1e40af;
+  --color-accent: #dbeafe;
+  --color-accent-hover: #bfdbfe;
+  --color-background: #ffffff;
+  --color-surface: #f8fafc;
+  --color-border: #93c5fd;
+  --color-text: #1e293b;
+  --color-text-muted: #64748b;
+  --color-success: #3b82f6;
 
   --spacing-xs: 0.5rem;
   --spacing-sm: 1rem;
@@ -81,8 +81,8 @@ strong {
 // HEADER
 .header {
   padding: var(--spacing-lg) 0;
-  border-bottom: 1px solid var(--color-primary);
-  background: rgba(255, 254, 240, 0.95);
+  border-bottom: 1px solid var(--color-border);
+  background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   position: sticky;
   top: 0;
@@ -509,39 +509,36 @@ strong {
 }
 
 .rate-card {
-  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
   padding: var(--spacing-lg);
   background: var(--color-background);
-  border: 1px solid var(--color-primary);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   transition: all 0.3s ease;
   cursor: pointer;
   animation: fadeInUp 0.6s ease forwards;
   opacity: 0;
+  position: relative;
   overflow: hidden;
 
   &:hover {
     background: var(--color-accent);
     transform: translateY(-4px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.15);
 
     .visit-link {
       color: var(--color-primary);
       transform: translateX(4px);
     }
-
-    .provider-logo-faded {
-      opacity: 0.15;
-    }
   }
 
   &.best {
     border-width: 2px;
+    border-color: var(--color-primary);
     background: var(--color-accent);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
 
     &::before {
       content: '';
@@ -551,11 +548,10 @@ strong {
       right: 0;
       height: 3px;
       background: var(--color-primary);
-      z-index: 1;
     }
 
     &:hover {
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+      box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
     }
 
     .provider-name {
@@ -568,36 +564,6 @@ strong {
   }
 }
 
-.provider-logo-background {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 120px;
-  height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.provider-logo-faded {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  opacity: 0.12;
-  filter: grayscale(100%);
-  transition: opacity 0.3s ease;
-}
-
-.rate-card-content {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
 .rate-card-header {
   display: flex;
   justify-content: space-between;
@@ -605,10 +571,23 @@ strong {
   gap: var(--spacing-sm);
 }
 
+.provider-info {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.provider-logo {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+}
+
 .provider-name {
   font-size: 1.25rem;
   font-weight: 700;
-  color: var(--color-primary);
+  color: var(--color-text);
 }
 
 .best-badge {
@@ -651,10 +630,34 @@ strong {
 @keyframes starRotate {
   0% {
     transform: rotate(0deg);
+    color: #fbbf24; // bright yellow
+  }
+
+  16.66% {
+    color: #ffffff; // white
+  }
+
+  33.33% {
+    transform: rotate(60deg);
+    color: #ec4899; // hot pink
+  }
+
+  50% {
+    color: #f87171; // light red
+  }
+
+  66.66% {
+    transform: rotate(120deg);
+    color: #fb923c; // bright orange
+  }
+
+  83.33% {
+    color: #f472b6; // pink
   }
 
   100% {
-    transform: rotate(360deg);
+    transform: rotate(180deg);
+    color: #facc15; // yellow
   }
 }