style.css

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Poppins","Inter",system-ui,sans-serif;
}

/* BACKGROUND (LIGHT + PROFESSIONAL) */
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 20%, #e0e7ff 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,#f8fafc,#eef2ff);
  color:#1f2937;
  overflow-x:hidden;
}

/* FLOATING ORBS */
.orb{
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(255,255,255,0.45);
  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);}
}
/* ===== NEW COLOR VARIABLES ===== */
:root{
  --peach:#fda4af;
  --lavender:#c4b5fd;
  --ice:#67e8f9;
  --ink:#334155;
}

/* ===== HERO BACKGROUND (MORE DREAMY) ===== */
.hero{
  min-height:88vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px 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)
    );

  backdrop-filter: blur(36px) saturate(170%);
  -webkit-backdrop-filter: blur(36px) saturate(170%);

  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);

  animation: floatGlass 7s ease-in-out infinite;
}

/* soft floating */
@keyframes floatGlass{
  0%{ transform:translateY(0); }
  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:58px;
  margin-bottom:10px;
  background:linear-gradient(
    90deg,
    var(--lavender),
    var(--peach),
    var(--ice)
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===== SUBTITLE ===== */
.hero-sub{
  font-size:15.5px;
  font-weight:500;
  color:#6366f1;
  margin-bottom:20px;
}

/* ===== TEXT ===== */
.hero-text{
  max-width:620px;
  margin:0 auto 28px;
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
}

/* ===== BUTTONS (PURE GLASS) ===== */
.hero-buttons{
  display:flex;
  justify-content:center;
  gap:22px;
}

.glass-btn{
  position:relative;
  padding:16px 44px;
  border-radius:999px;

  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;
  font-weight:700;
  letter-spacing:1px;
  text-decoration:none;

  transition:.4s 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);
}

/* 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;
}

.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);
}

/* 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;
}

.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;
}