Update style.css

style.css

@@ -56,51 +56,87 @@ body{
   overflow-x:hidden;
 }
 
-/* ===== HERO (SPACE FIX + GLASS ANIMATED) ===== */
+//* ===== NEW COLOR VARIABLES ===== */
+:root{
+  --peach:#fda4af;
+  --lavender:#c4b5fd;
+  --ice:#67e8f9;
+  --ink:#334155;
+}
+
+/* ===== HERO BACKGROUND (MORE DREAMY) ===== */
 .hero{
-  min-height:90vh;            /* 👈 space kam */
+  min-height:88vh;
   display:flex;
   justify-content:center;
   align-items:center;
-  padding:40px 20px;
+  padding:30px 20px;
 }
 
+/* ===== ULTRA GLASS LAYERED HERO ===== */
 .hero-inner{
+  position:relative;
   text-align:center;
-  padding:50px 60px;
-  border-radius:32px;
+  padding:54px 64px;
+  border-radius:36px;
 
-  background:linear-gradient(
-    120deg,
-    rgba(255,255,255,0.75),
-    rgba(255,255,255,0.55)
-  );
+  /* layered glass */
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255,255,255,0.85),
+      rgba(255,255,255,0.55)
+    );
+
+  backdrop-filter: blur(36px) saturate(170%);
+  -webkit-backdrop-filter: blur(36px) saturate(170%);
 
-  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);
+    0 50px 140px rgba(99,102,241,0.25),
+    inset 0 1px 0 rgba(255,255,255,0.95);
 
-  animation: glassFloat 6s ease-in-out infinite;
+  animation: floatGlass 7s ease-in-out infinite;
 }
 
-/* subtle glass movement */
-@keyframes glassFloat{
+/* soft floating */
+@keyframes floatGlass{
   0%{ transform:translateY(0); }
-  50%{ transform:translateY(-12px); }
+  50%{ transform:translateY(-14px); }
   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:56px;
-  margin-bottom:12px;   /* 👈 spacing tight */
-  background:linear-gradient(90deg,
-    var(--accent1),
-    var(--accent2),
-    var(--accent3)
+  font-size:58px;
+  margin-bottom:10px;
+  background:linear-gradient(
+    90deg,
+    var(--lavender),
+    var(--peach),
+    var(--ice)
   );
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
@@ -108,195 +144,54 @@ body{
 
 /* ===== SUBTITLE ===== */
 .hero-sub{
-  font-size:16px;
+  font-size:15.5px;
   font-weight:500;
-  color:#4338ca;
-  margin-bottom:22px;
+  color:#6366f1;
+  margin-bottom:20px;
 }
 
 /* ===== TEXT ===== */
 .hero-text{
   max-width:620px;
-  margin:0 auto 30px;
+  margin:0 auto 28px;
   font-size:16px;
   line-height:1.9;
-  color:#374151;
+  color:var(--ink);
 }
 
-/* ===== BUTTON GROUP ===== */
+/* ===== BUTTONS (PURE GLASS) ===== */
 .hero-buttons{
   display:flex;
   justify-content:center;
   gap:22px;
 }
 
-/* ===== GLASS BUTTON ===== */
 .glass-btn{
-  padding:16px 42px;
+  position:relative;
+  padding:16px 44px;
   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(
-    180deg,
-    rgba(255,255,255,0.75),
-    rgba(255,255,255,0.55)
-  );
-  backdrop-filter:blur(28px) saturate(150%);
-  border-radius:30px;
-  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.95);
-  transition:transform .45s ease, box-shadow .45s ease;
-}
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255,255,255,0.9),
+      rgba(255,255,255,0.6)
+    );
 
-.glass-3d:hover{
-  transform:translateY(-10px) rotateX(4deg);
-  box-shadow:
-    0 70px 180px rgba(236,72,153,0.35),
-    inset 0 1px 0 rgba(255,255,255,1);
-}
+  backdrop-filter: blur(22px);
+  border:1px solid rgba(255,255,255,1);
 
-/* BUTTON */
-.glass-btn{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  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:#4f46e5;
   font-weight:700;
   letter-spacing:1px;
   text-decoration:none;
-  transition:.35s;
-}
 
-.glass-btn:hover{
-  transform:scale(1.06);
-  box-shadow:0 20px 60px rgba(99,102,241,.35);
-}
-
-.small{padding:12px 28px;}
-
-/* INFO SECTIONS */
-.info{
-  max-width:900px;
-  margin:80px auto;
-  padding:40px;
-  text-align:center;
-}
-
-.info h3{
-  font-size:34px;
-  margin-bottom:18px;
-  color:#4f46e5;
-}
-
-.info span{
-  color:#6b7280;
-}
-
-/* SKILLS */
-.skills{
-  padding:120px 8% 60px;
-  text-align:center;
-}
-
-.skills h3{
-  font-size:36px;
-  margin-bottom:50px;
-  color:#4338ca;
-}
-
-.bubble-wrap{
-  display:flex;
-  flex-wrap:wrap;
-  justify-content:center;
-  gap:26px;
-}
-
-.bubble{
-  padding:20px 34px;
-  border-radius:999px;
-  background:rgba(255,255,255,0.75);
-  backdrop-filter:blur(22px);
-  border:1px solid rgba(255,255,255,0.95);
-  font-weight:600;
-  color:#4f46e5;
-  box-shadow:0 20px 50px rgba(99,102,241,.25);
-  animation:floatBubble 6s ease-in-out infinite;
-  transition:.4s;
-}
-
-.bubble:hover{
-  transform:scale(1.15);
-  box-shadow:0 30px 70px rgba(236,72,153,.4);
-}
-
-@keyframes floatBubble{
-  0%{transform:translateY(0);}
-  50%{transform:translateY(-18px);}
-  100%{transform:translateY(0);}
-}
-
-/* PROJECTS */
-.projects{
-  padding:100px 8%;
-  text-align:center;
-}
-
-.projects h3{
-  font-size:36px;
-  margin-bottom:50px;
-  color:#4338ca;
-}
-
-.project-grid{
-  display:grid;
-  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
-  gap:40px;
+  transition:.4s ease;
 }
 
-.project{
-  padding:34px;
-  display:flex;
-  flex-direction:column;
-}
-
-.project h4{
-  font-size:22px;
-  margin-bottom:10px;
-  color:#312e81;
-}
-
-.project-action{
-  margin-top:auto;
-}
-
-/* FOOTER */
-footer{
-  text-align:center;
-  padding:40px;
-  color:#6b7280;
+.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);
 }