Update style.css

style.css

@@ -146,12 +146,25 @@ body {
 }
 
 .section-image {
-    height: 6rem;
+    height: 5rem;
+    width: auto;
+    max-width: 200px;
+}
+
+.section-image-lg {
+    height: 7rem;
+    max-width: 280px;
 }
 
 @media (min-width: 768px) {
     .section-image {
-        height: 8rem;
+        height: 7rem;
+        max-width: 280px;
+    }
+    
+    .section-image-lg {
+        height: 10rem;
+        max-width: 400px;
     }
 }
 
@@ -162,12 +175,29 @@ body {
     gap: 2rem;
 }
 
-@media (min-width: 1024px) {
+.grid-3 {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+}
+
+@media (min-width: 768px) {
     .grid-2 {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
+@media (min-width: 1024px) {
+    .grid-3 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.build-grid {
+    max-width: 56rem;
+    margin: 0 auto;
+}
+
 .pricing-grid {
     max-width: 80rem;
     margin: 0 auto;
@@ -186,6 +216,11 @@ body {
     box-shadow: var(--shadow-soft-lg);
 }
 
+.card-flex {
+    display: flex;
+    flex-direction: column;
+}
+
 .card-title {
     font-size: 1.25rem;
     font-weight: 500;
@@ -199,6 +234,12 @@ body {
     flex-grow: 1;
 }
 
+.card-text-small {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    margin-bottom: 1rem;
+}
+
 /* Badges */
 .badge {
     display: inline-block;
@@ -217,7 +258,7 @@ body {
 }
 
 .badge-success {
-    background: rgba(108, 207, 124, 0.1);
+    background: rgba(61, 222, 153, 0.1);
     color: var(--success);
 }
 
@@ -273,113 +314,55 @@ body {
     height: 1rem;
 }
 
-/* Carousel */
-.carousel {
-    position: relative;
-    max-width: 80rem;
-    margin: 0 auto;
-    padding: 0 4rem;
-}
-
-.carousel-container {
-    overflow: visible;
-    border-radius: 1.5rem;
-    position: relative;
-}
-
-.carousel-track {
-    display: flex;
-    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 2rem 0;
-}
-
-.carousel-item {
-    min-width: 70%;
-    flex-shrink: 0;
-    padding: 0 1rem;
-    opacity: 0.3;
-    transform: scale(0.9);
-    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-    pointer-events: none;
-}
-
-.carousel-item.active {
-    opacity: 1;
-    transform: scale(1);
-    pointer-events: auto;
-    z-index: 10;
+.mb-4 {
+    margin-bottom: 1rem;
 }
 
-@media (max-width: 768px) {
-    .carousel-item {
-        min-width: 90%;
-    }
-    
-    .carousel {
-        padding: 0 2rem;
-    }
+.mt-auto {
+    margin-top: auto;
 }
 
-.carousel-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
-    background: white;
-    border: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
+/* Video Wrapper */
+.video-wrapper {
+    aspect-ratio: 16 / 9;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
     box-shadow: var(--shadow-soft);
-    z-index: 10;
-}
-
-.carousel-btn:hover {
-    background: var(--muted);
-    box-shadow: var(--shadow-soft-lg);
-}
-
-.carousel-btn svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    stroke: var(--foreground);
 }
 
-.carousel-prev {
-    left: -1.5rem;
+.video-wrapper iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
 }
 
-.carousel-next {
-    right: -1.5rem;
+/* GIF Wrapper */
+.gif-wrapper {
+    aspect-ratio: 16 / 9;
+    border-radius: 1.25rem;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-soft);
 }
 
-@media (max-width: 768px) {
-    .carousel-prev {
-        left: 0.5rem;
-    }
-    
-    .carousel-next {
-        right: 0.5rem;
-    }
+.gif-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
-/* Video Wrapper */
-.video-wrapper {
-    aspect-ratio: 16 / 9;
+/* Dashboard Image Wrapper */
+.dashboard-image-wrapper {
     border-radius: 1.25rem;
     overflow: hidden;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
     box-shadow: var(--shadow-soft);
 }
 
-.video-wrapper iframe {
+.dashboard-image-wrapper img {
     width: 100%;
-    height: 100%;
-    border: none;
+    height: auto;
 }
 
 /* Placeholder */
@@ -397,6 +380,23 @@ body {
     box-shadow: var(--shadow-soft);
 }
 
+/* Beta Link Text */
+.beta-link-text {
+    text-align: center;
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+    margin-top: 1.5rem;
+}
+
+.beta-link-text a {
+    color: var(--primary);
+    text-decoration: none;
+}
+
+.beta-link-text a:hover {
+    text-decoration: underline;
+}
+
 /* Discord CTA */
 .discord-cta {
     margin-top: 4rem;
@@ -468,9 +468,49 @@ body {
 
 /* LINKS */
 a {
-  color: var(--color-primary);
+    color: var(--primary);
 }
 
+/* Documentation Button */
+.doc-button {
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--primary);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 9999px;
+    text-decoration: none;
+    box-shadow: var(--shadow-soft-lg);
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.doc-button:hover {
+    box-shadow: 0 6px 20px rgba(59, 176, 209, 0.4);
+    padding-right: 1.5rem;
+}
+
+.doc-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+}
+
+.doc-text {
+    max-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: max-width 0.3s ease;
+}
+
+.doc-button:hover .doc-text {
+    max-width: 120px;
+}
 
 /* Footer */
 .footer {
@@ -483,4 +523,4 @@ a {
 /* Smooth Scrolling */
 html {
     scroll-behavior: smooth;
-}
+}