Update style.css

style.css

@@ -64,79 +64,72 @@ body{
   --ink:#334155;
 }
 
-/* ===== HERO BACKGROUND (MORE DREAMY) ===== */
+/*/* ===== NEW PROFESSIONAL COLOR SYSTEM ===== */
+:root{
+  --bg1:#fdf4ff;   /* lavender white */
+  --bg2:#f0f9ff;   /* ice blue */
+  --accent1:#6366f1; /* indigo */
+  --accent2:#ec4899; /* rose */
+  --accent3:#06b6d4; /* cyan */
+}
+
+/* ===== BACKGROUND (SOFT + CLEAN) ===== */
+body{
+  min-height:100vh;
+  background:
+    radial-gradient(circle at 20% 15%, #e9d5ff 0%, transparent 35%),
+    radial-gradient(circle at 80% 30%, #fbcfe8 0%, transparent 40%),
+    radial-gradient(circle at 50% 90%, #cffafe 0%, transparent 40%),
+    linear-gradient(180deg,var(--bg1),var(--bg2));
+  color:#1f2937;
+  overflow-x:hidden;
+}
+
+/* ===== HERO (SPACE FIX + GLASS ANIMATED) ===== */
 .hero{
-  min-height:88vh;
+  min-height:90vh;            /* 👈 space kam */
   display:flex;
   justify-content:center;
   align-items:center;
-  padding:30px 20px;
+  padding:40px 20px;
 }
 
-/* ===== ULTRA GLASS LAYERED HERO ===== */
 .hero-inner{
-  position:relative;
   text-align:center;
-  padding:54px 64px;
-  border-radius:36px;
-
-  /* layered glass */
-  background:
-    linear-gradient(
-      135deg,
-      rgba(255,255,255,0.85),
-      rgba(255,255,255,0.55)
-    );
+  padding:50px 60px;
+  border-radius:32px;
 
-  backdrop-filter: blur(36px) saturate(170%);
-  -webkit-backdrop-filter: blur(36px) saturate(170%);
+  background:linear-gradient(
+    120deg,
+    rgba(255,255,255,0.75),
+    rgba(255,255,255,0.55)
+  );
 
+  backdrop-filter: blur(32px) saturate(160%);
   border:1px solid rgba(255,255,255,0.95);
 
   box-shadow:
-    0 50px 140px rgba(99,102,241,0.25),
-    inset 0 1px 0 rgba(255,255,255,0.95);
+    0 40px 120px rgba(99,102,241,0.25),
+    inset 0 1px 0 rgba(255,255,255,0.9);
 
-  animation: floatGlass 7s ease-in-out infinite;
+  animation: glassFloat 6s ease-in-out infinite;
 }
 
-/* soft floating */
-@keyframes floatGlass{
+/* subtle glass movement */
+@keyframes glassFloat{
   0%{ transform:translateY(0); }
-  50%{ transform:translateY(-14px); }
+  50%{ transform:translateY(-12px); }
   100%{ transform:translateY(0); }
 }
 
-/* subtle glass shine */
-.hero-inner::after{
-  content:"";
-  position:absolute;
-  inset:0;
-  border-radius:36px;
-  background:linear-gradient(
-    120deg,
-    transparent 35%,
-    rgba(255,255,255,0.6),
-    transparent 65%
-  );
-  opacity:0.6;
-  animation: shine 6s linear infinite;
-}
-
-@keyframes shine{
-  from{ transform:translateX(-120%); }
-  to{ transform:translateX(120%); }
-}
-
 /* ===== NAME ===== */
 .hero-name{
-  font-size:58px;
-  margin-bottom:10px;
-  background:linear-gradient(
-    90deg,
-    var(--lavender),
-    var(--peach),
-    var(--ice)
+  font-size:56px;
+  margin-bottom:12px;   /* 👈 spacing tight */
+  background:linear-gradient(90deg,
+    var(--accent1),
+    var(--accent2),
+    var(--accent3)
   );
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
@@ -144,54 +137,47 @@ body{
 
 /* ===== SUBTITLE ===== */
 .hero-sub{
-  font-size:15.5px;
+  font-size:16px;
   font-weight:500;
-  color:#6366f1;
-  margin-bottom:20px;
+  color:#4338ca;
+  margin-bottom:22px;
 }
 
 /* ===== TEXT ===== */
 .hero-text{
   max-width:620px;
-  margin:0 auto 28px;
+  margin:0 auto 30px;
   font-size:16px;
   line-height:1.9;
-  color:var(--ink);
+  color:#374151;
 }
 
-/* ===== BUTTONS (PURE GLASS) ===== */
+/* ===== BUTTON GROUP ===== */
 .hero-buttons{
   display:flex;
   justify-content:center;
   gap:22px;
 }
 
+/* ===== GLASS BUTTON ===== */
 .glass-btn{
-  position:relative;
-  padding:16px 44px;
+  padding:16px 42px;
   border-radius:999px;
+  background:rgba(255,255,255,0.7);
+  backdrop-filter: blur(18px);
+  border:1px solid rgba(255,255,255,0.95);
 
-  background:
-    linear-gradient(
-      135deg,
-      rgba(255,255,255,0.9),
-      rgba(255,255,255,0.6)
-    );
-
-  backdrop-filter: blur(22px);
-  border:1px solid rgba(255,255,255,1);
-
-  color:#4f46e5;
+  color:var(--accent1);
   font-weight:700;
   letter-spacing:1px;
   text-decoration:none;
 
-  transition:.4s ease;
+  transition:.35s ease;
 }
 
 .glass-btn:hover{
-  transform:scale(1.1);
-  box-shadow:
-    0 25px 70px rgba(253,164,175,0.45),
-    0 0 0 8px rgba(196,181,253,0.15);
+  transform:scale(1.08);
+  box-shadow:0 20px 60px rgba(236,72,153,0.35);
 }
+
+