body{margin:0;background:black;color:white;font-family:sans-serif;overflow-x:hidden}
canvas{position:fixed;z-index:-1}

.header{display:flex;justify-content:space-between;padding:20px;align-items:center}
.logo span{font-size:30px;opacity:0}
.tidi{animation:slideLeft 1.5s forwards}
.dot{animation:drop 1.5s forwards}
.digital{animation:slideRight 1.5s forwards}

@keyframes slideLeft{from{transform:translateX(-200px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideRight{from{transform:translateX(200px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes drop{from{transform:translateY(-200px);opacity:0}to{transform:translateY(0);opacity:1}}

.hero{text-align:center;margin-top:100px}
.glow{text-shadow:0 0 20px #00f,0 0 40px #0ff}

.carousel{overflow:hidden;margin-top:50px}
.track{display:flex;animation:scroll 20s linear infinite}
.card{min-width:250px;margin:10px;padding:40px;background:#111;border-radius:10px;transition:.3s;border:1px solid #0ff}
.card:hover{transform:scale(1.1);box-shadow:0 0 20px #0ff}

@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

#bot{position:fixed;bottom:20px;right:20px;width:90px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

#modal{display:none;position:fixed;width:100%;height:100%;background:rgba(0,0,0,.8)}
.modal-content{background:#111;margin:15% auto;padding:20px;width:300px;border:1px solid #0ff}