@import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&family=Orbitron:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{background:#050816;color:#fff;font-family:Poppins,sans-serif}

.background{position:fixed;inset:0;z-index:-3;background:#050816}
.background video{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(1.25)}
.overlay{position:absolute;inset:0;background:
 radial-gradient(circle at center,rgba(0,190,255,.12),transparent 42%),
 linear-gradient(135deg,rgba(2,7,20,.8),rgba(3,10,28,.42),rgba(1,3,12,.9))}
.grid{position:absolute;inset:0;opacity:.16;background-image:
 linear-gradient(rgba(0,190,255,.22) 1px,transparent 1px),
 linear-gradient(90deg,rgba(0,190,255,.22) 1px,transparent 1px);
 background-size:60px 60px;
 mask-image:linear-gradient(to bottom,transparent,black 35%,black 65%,transparent)}

.hero{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}
.brand {
  font-family: "Mr Dafoe", cursive;
  font-size: clamp(55px, 8vw, 105px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(0, 217, 255, 0.7),
    0 0 25px rgba(0, 217, 255, 0.45);
}
.brand span {
  color: #00d9ff;
}
.line{width:90px;height:2px;margin:25px 0;background:linear-gradient(90deg,transparent,#00d9ff,transparent);box-shadow:0 0 15px #00d9ff}
.eyebrow{font-size:11px;letter-spacing:.42em;color:#b7c9d8;margin-bottom:18px}
h1{font:800 clamp(50px,10vw,125px)/.95 Orbitron,sans-serif;letter-spacing:.04em}
h1 span{color:#00d9ff;text-shadow:0 0 35px rgba(0,217,255,.65)}
.description{margin-top:25px;color:#d4e0e8;font-size:clamp(13px,1.5vw,18px);letter-spacing:.12em}
.loader{width:150px;height:2px;background:rgba(255,255,255,.15);margin-top:35px;overflow:hidden}
.loader span{display:block;width:45%;height:100%;background:#00d9ff;box-shadow:0 0 15px #00d9ff;animation:load 2s ease-in-out infinite}
footer{position:fixed;bottom:22px;width:100%;text-align:center;color:rgba(255,255,255,.45);font-size:10px;letter-spacing:.25em}

@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
@media(max-width:600px){
 .brand{letter-spacing:.1em}
 .eyebrow{font-size:8px;letter-spacing:.25em}
 h1{font-size:48px}
 .description{letter-spacing:.05em}
 .grid{background-size:35px 35px}
}