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

body{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, #1e3a8a, transparent 40%),
    radial-gradient(circle at bottom right, #0ea5e9, transparent 40%),
    linear-gradient(135deg,#020617,#020617);
  color:#fff;
  text-align:center;
  padding:25px;
  perspective:1200px;
  overflow-x:hidden;
}

/* Mouse light */
.mouse-light{
  position:fixed;
  width:400px;
  height:400px;
  pointer-events:none;
  background:radial-gradient(
    circle,
    rgba(56,189,248,0.25),
    rgba(56,189,248,0.15),
    transparent 65%
  );
  transform:translate(-50%,-50%);
  filter:blur(20px);
  z-index:0;
}

.header,
.container{
  position:relative;
  z-index:1;
}

.header{
  margin-bottom:30px;
  animation: floatHeader 6s ease-in-out infinite;
}

@keyframes floatHeader{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}

.logo{
  width:70px;
  height:70px;
  margin:0 auto 10px;
  border-radius:50%;
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:bold;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.by{
  display:block;
  margin-top:6px;
  font-size:14px;
  letter-spacing:1.2px;
  color:#38bdf8;
}

.container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}

.card{
  background:linear-gradient(
    145deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
  );
  backdrop-filter:blur(18px);
  border-radius:18px;
  padding:18px;
  box-shadow:0 25px 50px rgba(0,0,0,.55);
  transform-style:preserve-3d;
  transition:.6s;
}

.card:hover{
  transform:translateY(-18px) rotateX(12deg) rotateY(-12deg) scale(1.06);
}

input,button{
  width:100%;
  padding:9px;
  margin:6px 0;
  border:none;
  border-radius:8px;
  outline:none;
}

button{
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  font-weight:bold;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(56,189,248,.45);
}

button:hover{
  transform:translateY(-3px);
}

/* Mobile me mouse light off */
@media(max-width:768px){
  .mouse-light{display:none;}
}