Update style.css

style.css

@@ -35,38 +35,123 @@ body{
   from{transform:translateY(0);}
   to{transform:translateY(-60px);}
 }
+/* ===== NEW PROFESSIONAL COLOR SYSTEM ===== */
+:root{
+  --bg1:#fdf4ff;   /* lavender white */
+  --bg2:#f0f9ff;   /* ice blue */
+  --accent1:#6366f1; /* indigo */
+  --accent2:#ec4899; /* rose */
+  --accent3:#06b6d4; /* cyan */
+}
 
-/* HERO */
-.hero{
+/* ===== 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:90vh;            /* 👈 space kam */
   display:flex;
-  flex-direction:column;
   justify-content:center;
   align-items:center;
+  padding:40px 20px;
+}
+
+.hero-inner{
   text-align:center;
-  padding:40px;
+  padding:50px 60px;
+  border-radius:32px;
+
+  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 40px 120px rgba(99,102,241,0.25),
+    inset 0 1px 0 rgba(255,255,255,0.9);
+
+  animation: glassFloat 6s ease-in-out infinite;
+}
+
+/* subtle glass movement */
+@keyframes glassFloat{
+  0%{ transform:translateY(0); }
+  50%{ transform:translateY(-12px); }
+  100%{ transform:translateY(0); }
 }
 
-.hero h1{
-  font-size:64px;
-  background:linear-gradient(90deg,#6366f1,#ec4899,#06b6d4);
+/* ===== NAME ===== */
+.hero-name{
+  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;
 }
 
-.hero h2{
-  margin-top:10px;
+/* ===== SUBTITLE ===== */
+.hero-sub{
+  font-size:16px;
   font-weight:500;
   color:#4338ca;
+  margin-bottom:22px;
 }
 
-.hero p{
-  max-width:650px;
-  margin:28px auto;
-  font-size:17px;
+/* ===== TEXT ===== */
+.hero-text{
+  max-width:620px;
+  margin:0 auto 30px;
+  font-size:16px;
+  line-height:1.9;
   color:#374151;
 }
 
+/* ===== BUTTON GROUP ===== */
+.hero-buttons{
+  display:flex;
+  justify-content:center;
+  gap:22px;
+}
+
+/* ===== GLASS BUTTON ===== */
+.glass-btn{
+  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);
+
+  color:var(--accent1);
+  font-weight:700;
+  letter-spacing:1px;
+  text-decoration:none;
+
+  transition:.35s ease;
+}
+
+.glass-btn:hover{
+  transform:scale(1.08);
+  box-shadow:0 20px 60px rgba(236,72,153,0.35);
+}
+
+
 /* GLASS 3D */
 .glass-3d{
   background:linear-gradient(