*{margin:0;padding:0;box-sizing:border-box;}
    html,body{
      height:100%;
      scroll-behavior:smooth;
      font-family:"Poppins",sans-serif;
      color:#eae6ff;
      background:#0b0014;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit;}
    ::selection{background:#8b5cf6;color:#fff;}

    /* Background canvas */
    #bg{
      position:fixed;top:0;left:0;width:100vw;height:100vh;
      z-index:0;display:block;
    }

    /* Main wrapper */
    .wrap{
      position:relative;
      z-index:10;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:6rem 1rem;
    }

    /* Hero */
    .hero{
      text-align:center;
      backdrop-filter:blur(16px) saturate(180%);
      background:rgba(40,20,60,0.4);
      border:1px solid rgba(180,120,255,0.2);
      border-radius:2rem;
      padding:3rem 2rem;
      box-shadow:0 0 35px rgba(140,80,255,0.25);
      max-width:600px;
      animation:fadeInUp 1.2s ease both;
    }

    .hero-profile{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:1.2rem;
      flex-wrap:wrap;
      margin-bottom:1rem;
    }

    .profile-photo{
      width:150px;
      height:150px;
      border-radius:50%;
      object-fit:cover;
      border:3px solid #8b5cf6;
      box-shadow:0 0 20px rgba(140,80,255,0.4);
      transition:transform 0.3s ease, box-shadow 0.3s ease;
    }

    .profile-photo:hover{
      transform:scale(1.05);
      box-shadow:0 0 30px rgba(140,80,255,0.7);
    }

    .hero-text{text-align:left;}

    .hero-text h1{
      font-size:2.6rem;
      font-weight:700;
      background:linear-gradient(90deg,#8b5cf6,#3b82f6,#c084fc);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      margin-bottom:0.6rem;
    }
    .hero-text p{opacity:0.9;font-size:1.1rem;}

    /* Buttons */
    .button-row{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:1rem;
      margin-top:2rem;
    }
    .btn{
      padding:0.8rem 1.6rem;
      border-radius:50px;
      border:none;
      cursor:pointer;
      font-size:1rem;
      color:#fff;
      background:linear-gradient(90deg,#8b5cf6,#3b82f6,#c084fc);
      transition:transform 0.3s ease,box-shadow 0.3s ease;
    }
    .btn:hover{
      transform:translateY(-4px) scale(1.05);
      box-shadow:0 0 25px rgba(160,120,255,0.5);
    }

    /* Capsule-styled section titles */
    .section-title {
      display:inline-block;
      padding:0.6rem 1.6rem;
      border-radius:50px;
      border:2px solid transparent;
      background:linear-gradient(#0b0014,#0b0014) padding-box,
                 linear-gradient(90deg,#8b5cf6,#3b82f6,#c084fc) border-box;
      box-shadow:0 0 25px rgba(140,80,255,0.25);
      backdrop-filter:blur(10px);
      font-size:2rem;
      font-weight:600;
      color:#fff;
      animation:fadeInUp 1.5s ease both;
      margin-bottom: 30px;
    }

    /* Skill Badges Section */
    .badges-section{
      margin-top:6rem;
      text-align:center;
      width:100%;
      max-width:1100px;
    }

    .badge-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:1.5rem;
      justify-items:center;
    }
    .badge-card{
      backdrop-filter:blur(14px) saturate(180%);
      background:rgba(60,30,100,0.3);
      border:1px solid rgba(140,80,255,0.25);
      border-radius:1.5rem;
      padding:1.5rem;
      width:260px;
      transition:transform 0.3s ease,box-shadow 0.3s ease,background 0.4s ease;
    }
    .badge-card:hover{
      transform:translateY(-8px) scale(1.03);
      background:linear-gradient(135deg,#8b5cf6,#3b82f6,#c084fc);
      box-shadow:0 0 25px rgba(160,120,255,0.5);
    }
    .badge-card img{
      width:100%;
      border-radius:1rem;
    }

    /* Social cards grid */
    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:1.5rem;
      width:100%;
      max-width:1100px;
    }
    .social-card{
      backdrop-filter:blur(14px) saturate(180%);
      background:rgba(60,30,100,0.3);
      border:1px solid rgba(140,80,255,0.25);
      border-radius:1.5rem;
      padding:2rem 1rem;
      text-align:center;
      transition:transform 0.3s ease,box-shadow 0.3s ease,background 0.4s ease;
      cursor:pointer;
    }
    .social-card:hover{
      transform:translateY(-8px) scale(1.03);
      background:linear-gradient(135deg,#8b5cf6,#3b82f6,#c084fc);
      box-shadow:0 0 25px rgba(160,120,255,0.5);
    }
    .social-card img{
      width:40px;height:40px;margin-bottom:1rem;
      transition:transform 0.3s ease;
    }
    .social-card:hover img{transform:scale(1.15);}
    .social-card h3{margin-bottom:0.3rem;font-size:1.1rem;color:#fff;}
    .social-card p{font-size:0.9rem;opacity:0.85;}


    .card,
    .hero,
.social-card,
.badge-card,
.project-card {
  backdrop-filter: blur(14px) saturate(180%);
  background: rgba(60, 30, 100, 0.3);
  border: 2px solid transparent;
  border-radius: 1.5rem;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.4s ease;
}

.hero::before,
.card::before,
.social-card::before,
.badge-card::before,
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 2px;
  background: linear-gradient(135deg, #6a00ff, #b366ff, #00e1ff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0.7;
}


    /* Footer */
    footer{text-align:center;font-size:0.85rem;opacity:0.75;margin:3rem 0 1rem;}

    @keyframes fadeInUp{
      from{opacity:0;transform:translateY(20px);}
      to{opacity:1;transform:none;}
    }

    @media(max-width:600px){
      .hero h1{font-size:2rem;}
      .hero-text{text-align:center;}
    }