diff --git a/assets/css/animations.scss b/assets/css/animations.scss
new file mode 100644
index 00000000000..9761ca6fe6e
--- /dev/null
+++ b/assets/css/animations.scss
@@ -0,0 +1,31 @@
+// animations.scss
+
+@import 'variables';
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.pulse {
+  animation: pulse 1.5s infinite;
+}
diff --git a/assets/css/cards.scss b/assets/css/cards.scss
new file mode 100644
index 00000000000..2a4c3703c9f
--- /dev/null
+++ b/assets/css/cards.scss
@@ -0,0 +1,30 @@
+// cards.scss
+
+@import 'variables';
+@import 'mixins';
+
+.card {
+  background: #fff;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  padding: $spacing-unit * 2;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+  @include transition();
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  }
+
+  .card-title {
+    font-family: $heading-font;
+    font-size: 1.2rem;
+    margin-bottom: $spacing-unit;
+    color: $primary-color;
+  }
+
+  .card-content {
+    color: $text-color;
+    font-size: 0.95rem;
+  }
+}
diff --git a/assets/css/layout.scss b/assets/css/layout.scss
new file mode 100644
index 00000000000..f6d4894e6ec
--- /dev/null
+++ b/assets/css/layout.scss
@@ -0,0 +1,27 @@
+// layout.scss
+
+@import 'variables';
+@import 'mixins';
+
+.container {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  padding: $spacing-unit * 4 0;
+}
+
+.grid {
+  display: grid;
+  gap: $spacing-unit * 2;
+
+  @include respond(tablet) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @include respond(mobile) {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/assets/css/mixins.scss b/assets/css/mixins.scss
new file mode 100644
index 00000000000..bfee9954c8e
--- /dev/null
+++ b/assets/css/mixins.scss
@@ -0,0 +1,22 @@
+// mixins.scss
+
+// Center items with flexbox
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Apply smooth transition
+@mixin transition($property: all) {
+  transition: $property $transition-speed ease-in-out;
+}
+
+// Responsive breakpoint
+@mixin respond($breakpoint) {
+  @if $breakpoint == mobile {
+    @media (max-width: 600px) { @content; }
+  } @else if $breakpoint == tablet {
+    @media (max-width: 900px) { @content; }
+  }
+}
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
new file mode 100644
index 00000000000..0e52f7c9571
--- /dev/null
+++ b/assets/css/variables.scss
@@ -0,0 +1,17 @@
+// variables.scss
+
+// 🎨 Color palette
+$primary-color: #1e90ff;
+$secondary-color: #ff6f61;
+$background-color: #f4f7fa;
+$text-color: #222;
+$border-color: #e2e8f0;
+
+// 🖋️ Typography
+$font-stack: 'Poppins', sans-serif;
+$heading-font: 'Montserrat', sans-serif;
+
+// 📏 Spacing and sizing
+$spacing-unit: 8px;
+$border-radius: 8px;
+$transition-speed: 0.3s;