:root{
      --primary:#7a5cff;
      --secondary:#00d4ff;
      --glass:rgba(255,255,255,0.08);
      --border:rgba(255,255,255,0.15);
      --text:#eaf0ff;
    }
/* 🌌 Preloader */
#preloader{
  position:fixed;
  inset:0;
  background:#020412;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  flex-direction:column;
}

/*  Content */
.loader-content{
  text-align:center;
}

/*  Orbit Animation */
.orbit{
  width:80px;
  height:80px;
  border:2px solid rgba(122,92,255,0.3);
  border-radius:50%;
  position:relative;
  animation:spin 2s linear infinite;
  margin:0 auto 20px;
}

.planet{
  width:12px;
  height:12px;
  background:#00d4ff;
  border-radius:50%;
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  box-shadow:0 0 10px #00d4ff;
}

#preloader h2{
  font-family:"Orbitron", sans-serif;
  font-size:1rem;
  color:#cfd8ff;
}

/*  Animation */
@keyframes spin{
  from{transform:rotate(0);}
  to{transform:rotate(360deg);}
}
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family:"Poppins", sans-serif;
      min-height:100vh;
      background:#020412;
      color:var(--text);
      overflow-x:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* Galaxy Background */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      background:
        radial-gradient(circle at 25% 35%, rgba(122,92,255,0.45), transparent 45%),
        radial-gradient(circle at 75% 65%, rgba(0,212,255,0.35), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 60%),
        linear-gradient(135deg, #050816, #020412 60%);
      z-index:-3;
    }

    /* Stars */
    body::after{
      content:"";
      position:fixed;
      inset:0;
      background:url("https://www.transparenttextures.com/patterns/stardust.png");
      opacity:0.85;
      animation: moveStars 120s linear infinite;
      z-index:-2;
    }

    @keyframes moveStars{
      from{transform:translateY(0);}
      to{transform:translateY(-2000px);}
    }

    /*  Card */
.card{
  width:95%;
  max-width:1000px;
  border-radius:28px;
  background:rgba(2,4,18,0.55);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 0 30px rgba(0,0,0,0.35);
  display:grid;
  grid-template-columns:350px 1fr;
  overflow:hidden;
  position:relative; 
}




.card::before,
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.card::before{
  z-index:0;
  opacity:0.55;
  background:
     radial-gradient(3px 3px at 12% 18%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(2.5px 2.5px at 28% 72%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(3px 3px at 46% 34%, rgba(0,212,255,0.85), transparent 60%),
    radial-gradient(2.5px 2.5px at 63% 20%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(3px 3px at 78% 66%, rgba(122,92,255,0.85), transparent 60%),
    radial-gradient(2.5px 2.5px at 88% 38%, rgba(255,255,255,0.8), transparent 60%);
  background-size:300px 300px;
  animation: cardStarsDrift1 4s linear infinite;
}

.card::after{
  z-index:0;
  opacity:0.35;
  background:
     radial-gradient(3px 3px at 12% 18%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(2.5px 2.5px at 28% 72%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(3px 3px at 46% 34%, rgba(0,212,255,0.85), transparent 60%),
    radial-gradient(2.5px 2.5px at 63% 20%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(3px 3px at 78% 66%, rgba(122,92,255,0.85), transparent 60%),
    radial-gradient(2.5px 2.5px at 88% 38%, rgba(255,255,255,0.8), transparent 60%);
  background-size:300px 300px;
  animation: cardStarsDrift2 8s linear infinite;
}

.left,
.right{
  position:relative;
  z-index:1;
}

@keyframes cardStarsDrift1{
  from{background-position:0 0, 0 0, 0 0, 0 0;}
  to{background-position:0 -50px, -25px -70px, 20px -40px, -15px -60px;}
}

@keyframes cardStarsDrift2{
  from{background-position:0 0, 0 0, 0 0, 0 0;}
  to{background-position:18px -35px, -12px -45px, 10px -30px, -20px -50px;}
}

    /*  Left */
    .left{
      text-align:center;
      padding:40px 25px;
      background:linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
      border-right:1px solid var(--border);
    }

    .profile{
      width:220px;
      height:220px;
      margin:0 auto 20px;
      border-radius:50%;
      padding:5px;
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      box-shadow:0 0 25px rgba(122,92,255,0.6);
    }

    .profile img{
      width:100%;
      height:100%;
      border-radius:50%;
      object-fit:cover;
      border:4px solid #fff;
    }

    h1{
      font-family:"Orbitron", sans-serif;
      font-size:1.6rem;
      margin-bottom:10px;
    }

    .meta{
      margin-top:20px;
      font-size:0.95rem;
      color:#aab6ff;
    }

    /*  Right */
    .right{
      padding:50px 40px;
    }

    .title{
      font-size:2.2rem;
      font-family:"Orbitron", sans-serif;
      margin-bottom:15px;
    }

    .desc{
      font-size:1rem;
      color:#cbd4ff;
      line-height:1.9;
      margin-bottom:25px;
    }

    .grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:15px;
      margin-bottom:25px;
    }

    .box{
      padding:15px;
      border-radius:15px;
      background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.1);
      transition:0.3s;
    }

    .box:hover{
      transform:translateY(-5px);
      box-shadow:0 0 20px rgba(0,212,255,0.3);
    }

    .box span{
      display:block;
      font-size:0.8rem;
      color:#8fa0ff;
      margin-bottom:5px;
    }

    .box strong{
      font-size:0.95rem;
    }

    /* Social */
    .social{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    .social a{
      width:45px;
      height:45px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      background:rgba(255,255,255,0.08);
      color:#fff;
      border:1px solid rgba(255,255,255,0.1);
      transition:0.3s;
      text-decoration:none;
    }

    .social a:hover{
      background:var(--primary);
      transform:translateY(-5px);
      box-shadow:0 0 20px var(--primary);
    }

    /* Responsive */
    @media(max-width:900px){
      .card{
        grid-template-columns:1fr;
      }

      .left{
        border-right:none;
        border-bottom:1px solid var(--border);
      }

      .right{
        text-align:center;
      }

      .grid{
        grid-template-columns:1fr;
      }

      .social{
        justify-content:center;
      }
    }