/* ===== ROOT ===== */
:root{
  --bg:#050816;
  --primary:#6c2bff;
  --accent:#ff2e93;
  --cyan:#00e0ff;
}

/* ===== GLOBAL ===== */

body{
  background: linear-gradient(270deg, #000f55, #000b5c, #0017b3);
  background-size:400% 400%;
  animation:bgMove 10s infinite alternate;
  color:#fff;
  overflow-x:hidden;
}

@keyframes bgMove{
  0%{background-position:0% 50%;}
  100%{background-position:100% 50%;}
}

/* ===== CURSOR GLOW ===== */
.cursor{
  position:fixed;
  width:300px;
  height:300px;
  background:radial-gradient(circle,rgba(255,46,147,0.25),transparent 60%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:0;
}

/* ===== HERO ===== */
.hero{
  height: 225px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
	margin-top: 135px;
}

.hero h1{
  font-size:3.5rem;
	font-family: 'Rajdhani', sans-serif;
	font-weight:800;
  background:linear-gradient(90deg,#fff,#00e0ff);
  -webkit-background-clip:text;
  color:transparent;
}

.hero p{
  margin-top:8px;
  max-width:600px;
	color:#FFFFFF;
}

/* ===== BUTTON ===== */
.btn{
  margin-top:25px;
  padding:15px 35px;
  border:none;
  border-radius:30px;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  box-shadow:0 0 25px rgba(255,46,147,0.6);
  transition:0.4s;
}

.btn:hover{
  transform:scale(1.08);
  box-shadow:0 0 40px rgba(108,43,255,0.9);
}

/* ===== SECTION ===== */
.section{
  padding:100px 10%;
  position:relative;
  z-index:1;
}

/* ===== GRID ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}

/* ===== CARD ===== */
.card{
  padding:30px;
  border-radius:20px;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden;
  transition:0.4s;
}

/* animated border */
.card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(120deg,#ff2e93,#6c2bff,#00e0ff);
  background-size:300% 300%;
  animation:borderMove 5s linear infinite;
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

@keyframes borderMove{
  0%{background-position:0%;}
  100%{background-position:200%;}
}

.card:hover{
  transform:translateY(-12px) scale(1.02);
}

.card h3{
  margin-bottom:10px;
	color: #00faff;
	font-weight: 600;
}

.card p{
  color: #ffffff;
}

/* ===== DETAIL ===== */
.detail{
  display:flex;
  gap:60px;
  align-items:center;
  margin-top:100px;
  flex-wrap:wrap;
}

.detail:nth-child(even){
  flex-direction:row-reverse;
}

.detail-box{
  flex:1;
}

.detail-box h2{
  font-size:2rem;
  margin-bottom:10px;
}

.detail-box ul{
  margin-top:15px;
  padding-left:20px;
  opacity:0.8;
}

.detail-img{
  flex:1;
}

.detail-img div{
  height:auto;
  border-radius:20px;
  background:linear-gradient(135deg,#6c2bff,#ff2e93);
  box-shadow:0 0 60px rgba(108,43,255,0.5);
  animation:float 4s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}

/* ===== CTA ===== */
.cta{
  margin-top:120px;
  text-align:center;
  padding:80px;
  border-radius:20px;
  background:linear-gradient(135deg,#6c2bff,#ff2e93);
  box-shadow:0 0 60px rgba(255,46,147,0.6);
}

/* ===== SCROLL ANIMATION ===== */
.fade{
  opacity:0;
  transform:translateY(50px);
  transition:1s;
}

.fade.show{
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 575px) {
    .detail {
        display: block;
    }
		
		.detail-img div {
    height: 152px;
    border-radius: 5px;
		}
		
		.hero h1{
		    font-size: 26px;
		}
		
		.hero p{
		margin-top: 0px;
		}
}