Update style.css

style.css

@@ -2,145 +2,160 @@
   margin:0;
   padding:0;
   box-sizing:border-box;
-  font-family:"Inter","Segoe UI",system-ui,sans-serif;
+  font-family:"Poppins","Inter",system-ui,sans-serif;
 }
 
-/* ===== OPEN FLOW BACKGROUND (NO BLACK) ===== */
+/* ===== DREAMY LIGHT BACKGROUND ===== */
 body{
   min-height:100vh;
   background:
-    radial-gradient(1200px at 15% 20%, rgba(196,181,253,0.55), transparent 45%),
-    radial-gradient(1000px at 85% 30%, rgba(253,164,175,0.45), transparent 45%),
+    radial-gradient(circle at 20% 20%, #e9d5ff 0%, transparent 35%),
+    radial-gradient(circle at 80% 30%, #fbcfe8 0%, transparent 40%),
+    radial-gradient(circle at 50% 90%, #bfdbfe 0%, transparent 40%),
     linear-gradient(180deg,#f8fafc,#eef2ff);
   color:#1f2937;
-  padding:70px 20px 100px;
+  overflow-x:hidden;
 }
 
-/* ===== TYPOGRAPHY ===== */
-h1{
-  font-size:48px;
-  font-weight:700;
-  margin-bottom:12px;
-  background:linear-gradient(90deg,#6366f1,#ec4899);
+/* ===== FLOATING ORBS ===== */
+.orb{
+  position:absolute;
+  width:260px;
+  height:260px;
+  border-radius:50%;
+  background:rgba(255,255,255,0.4);
+  filter:blur(40px);
+  animation: float 12s infinite alternate;
+}
+.o1{top:5%; left:5%;}
+.o2{top:40%; right:10%; animation-delay:2s;}
+.o3{bottom:10%; left:35%; animation-delay:4s;}
+
+@keyframes float{
+  from{transform:translateY(0);}
+  to{transform:translateY(-60px);}
+}
+
+/* ===== HERO ===== */
+.hero{
+  min-height:100vh;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  text-align:center;
+  padding:40px;
+}
+
+.hero h1{
+  font-size:64px;
+  background:linear-gradient(90deg,#7c3aed,#ec4899,#3b82f6);
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
 }
 
-.subtitle{
-  font-size:16px;
-  color:#475569;
-  margin-bottom:26px;
+.hero h2{
+  margin-top:10px;
+  font-weight:500;
+  color:#4f46e5;
 }
 
-h2{
-  font-size:26px;
-  margin:80px 0 20px;
-  color:#312e81;
+.hero p{
+  max-width:620px;
+  margin:28px auto;
+  font-size:17px;
+  color:#374151;
+}
+
+/* ===== GLASS 3D ===== */
+.glass-3d{
+  background:rgba(255,255,255,0.55);
+  backdrop-filter:blur(25px);
+  border-radius:30px;
+  box-shadow:
+    0 30px 80px rgba(0,0,0,0.15),
+    inset 0 1px 0 rgba(255,255,255,0.9);
+  transition:transform .5s ease, box-shadow .5s ease;
 }
 
-p{
-  font-size:16px;
-  line-height:1.9;
-  color:#334155;
-  max-width:900px;
+.glass-3d:hover{
+  transform:translateY(-10px) rotateX(3deg);
+  box-shadow:0 50px 120px rgba(124,58,237,.25);
 }
 
-/* ===== GLASS BUTTON ===== */
+/* ===== BUTTONS ===== */
 .glass-btn{
-  display:inline-block;
-  margin-top:22px;
+  position:relative;
   padding:16px 42px;
   border-radius:999px;
-
-  background:rgba(255,255,255,0.65);
+  background:rgba(255,255,255,0.6);
   backdrop-filter:blur(18px);
   border:1px solid rgba(255,255,255,0.9);
-
-  color:#312e81;
+  color:#4f46e5;
   font-weight:700;
   letter-spacing:1px;
   text-decoration:none;
-
-  transition:all .4s ease;
-  position:relative;
   overflow:hidden;
+  transition:.4s;
 }
 
 .glass-btn::after{
   content:"";
   position:absolute;
   inset:0;
-  background:radial-gradient(circle at center, rgba(255,255,255,0.6), transparent 60%);
-  opacity:0;
-  transition:.4s;
+  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.8), transparent 70%);
+  transform:translateX(-100%);
 }
 
-.glass-btn:hover{
-  transform:translateY(-4px);
-  box-shadow:0 20px 50px rgba(99,102,241,.25);
-}
-
-.glass-btn:active::after{
-  opacity:1;
+.glass-btn:hover::after{
+  transform:translateX(100%);
+  transition:transform .6s;
 }
 
-/* ===== LINKS ===== */
-.links a{
-  margin-right:26px;
-  text-decoration:none;
-  font-weight:600;
-  color:#4f46e5;
-  border-bottom:2px solid transparent;
-  transition:.3s;
+.glass-btn:hover{
+  transform:scale(1.08);
+  box-shadow:0 20px 60px rgba(236,72,153,.35);
 }
 
-.links a:hover{
-  border-bottom-color:#ec4899;
-}
+.small{padding:12px 30px;}
 
-/* ===== SKILLS (GLASS CHIPS) ===== */
-.skills{
-  display:flex;
-  flex-wrap:wrap;
-  gap:16px;
+/* ===== PROJECTS ===== */
+.projects{
+  padding:100px 8%;
+  text-align:center;
 }
 
-.skills span{
-  padding:12px 28px;
-  border-radius:999px;
-  background:rgba(255,255,255,0.7);
-  backdrop-filter:blur(14px);
-  border:1px solid rgba(255,255,255,0.9);
-  color:#312e81;
-  font-size:14px;
-  transition:.3s;
+.projects h3{
+  font-size:36px;
+  margin-bottom:50px;
+  color:#5b21b6;
 }
 
-.skills span:hover{
-  transform:translateY(-4px);
-  box-shadow:0 12px 30px rgba(236,72,153,.25);
+.project-grid{
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
+  gap:40px;
 }
 
-/* ===== PROJECT LIST (NO BOX) ===== */
 .project{
-  margin-top:34px;
-  max-width:900px;
+  padding:34px;
 }
 
-.project h3{
-  font-size:21px;
-  margin-bottom:8px;
-  color:#1e1b4b;
+.project h4{
+  font-size:22px;
+  margin-bottom:10px;
+  color:#312e81;
 }
 
 .project p{
-  margin-bottom:14px;
+  font-size:15px;
+  margin-bottom:20px;
+  color:#374151;
 }
 
 /* ===== FOOTER ===== */
 footer{
-  margin-top:120px;
   text-align:center;
-  font-size:13px;
-  color:#64748b;
+  padding:40px;
+  color:#6b7280;
 }