*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, Helvetica, sans-serif;
}

body,html{
height:100%;
}

/* HERO */

.hero{
min-height:100vh;
background-image:url("../img/background.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
position:relative;
}

/* DARK OVERLAY */

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.25);
}

/* CONTENT */

.content{
position:relative;
max-width:700px;
padding:20px;
margin-top:-40px;
}

h1{
font-size:42px;
letter-spacing:6px;
margin-bottom:12px;
}

p{
font-size:14px;
line-height:1.6;
opacity:0.9;
}

/* LOGO CIRCLE */

.logo-circle{
position:relative;
margin:40px auto;
width:260px;
height:260px;
display:flex;
align-items:center;
justify-content:center;
}

.enso{
  position: absolute;
  width: 100%;
  opacity: 0.9;

  /* tambahan untuk putaran */
  animation: spin 20s linear infinite; /* durasi 20 detik → slow */
  transform-origin: center center;     /* putar di tengah gambar */
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); } /* minus = lawan arah jarum jam */
}

.logo{
position:relative;
width:80px;
}

/* PLATFORM ICONS */

.platforms{
margin-top:40px;
display:flex;
justify-content:center;
align-items:center;
gap:80px;
flex-wrap:wrap;
}

.platforms a{
display:flex;
flex-direction:column;
align-items:center;
text-decoration:none;
color:white;
font-size:14px;
min-width:90px;
}

.platforms img{
width:36px;
margin-bottom:8px;
transition:0.3s;
}

/* ICON GLOW */

.platforms a:hover img{

transform:scale(1.15);

filter:drop-shadow(0 0 8px rgba(255,255,255,0.8));

}

.platforms span{
opacity:0.9;
}

/* MOBILE */

@media (max-width:768px){

h1{
font-size:28px;
}

p{
font-size:13px;
}

.logo-circle{
width:200px;
height:200px;
}

.logo{
width:60px;
}

.platforms{
gap:40px;
}

.platforms img{
width:30px;
}

}

#fireflies {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.firefly {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,200,1) 0%, rgba(255,255,200,0) 70%);
  will-change: transform, opacity;
  opacity: 0.8;
  box-shadow: 0 0 10px rgba(255,255,150,0.8);
}