Update website styles and fix responsive design

css/style.css

@@ -1,5 +1,99 @@
 @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 
+/* Hero Section Typewriter Styles - Compressed for Desktop */
+.hero-typewriter-section {
+  margin: 1.2rem 0;
+}
+
+.hero-subheading {
+  font-size: 1.4rem;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 0.6rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.typewriter-container {
+  font-size: 1.8rem;
+  color: #52eef5;
+  font-weight: 600;
+  text-align: center;
+  min-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.8rem;
+}
+
+.hero-supporting-text {
+  font-size: 1.2rem;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.5;
+  margin: 1.5rem auto;
+  max-width: 600px;
+  text-align: center;
+}
+
+/* Hero CTA Buttons - Compact Layout */
+.hero-cta-buttons {
+  display: flex;
+  gap: 1.2rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1.8rem;
+  flex-wrap: wrap;
+}
+
+.primary-cta {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+  padding: 0.8rem 2rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 10px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  box-shadow: 
+    0 6px 24px rgba(109, 40, 217, 0.4),
+    0 3px 12px rgba(147, 51, 234, 0.3);
+}
+
+.primary-cta:hover {
+  transform: translateY(-2px) scale(1.03);
+  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 
+    0 10px 32px rgba(109, 40, 217, 0.6),
+    0 5px 16px rgba(147, 51, 234, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
+}
+
+.secondary-cta {
+  background: transparent;
+  border: 2px solid #52eef5;
+  color: #52eef5;
+  padding: 0.8rem 2rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 10px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(8px);
+}
+
+.secondary-cta:hover {
+  background: rgba(82, 238, 245, 0.1);
+  color: #ffffff;
+  border-color: #ffffff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(82, 238, 245, 0.3);
+}
+
 /* Page loading transitions & FOUC prevention */
 html.no-js {
     visibility: hidden;
@@ -1234,8 +1328,8 @@ section h2 {
     width: 100%;
     margin: 0;
     overflow: hidden;
-    height: 80vh;
-    min-height: 600px;
+    height: 70vh;
+    min-height: 500px;
     background: none;
     /* Ensure visible during page load */
     visibility: visible !important;
@@ -1250,7 +1344,7 @@ section h2 {
     height: 100%;
     align-items: center;
     justify-content: center;
-    padding: 10rem 4% 2rem 4%;
+    padding: 8rem 4% 1.5rem 4%;
     /* Ensure consistent display */
     visibility: visible !important;
 }
@@ -1273,10 +1367,10 @@ section h2 {
 }
 
 .hero-content h1 {
-    font-size: 6rem;
+    font-size: 4.5rem;
     line-height: 1.1;
-    margin-bottom: 1.5rem;
-    letter-spacing: 2px;
+    margin-bottom: 1rem;
+    letter-spacing: 1.5px;
     font-weight: 20;
     position: relative;
     text-shadow: none !important;