:root{
  --bg:#060606;
  --bg2:#0c0c0c;
  --panel:#101010;
  --line:#1e1e1e;
  --line-active:#ff3434;
  --text:#f5f5f5;
  --muted:#8a8a8a;
  --accent:#ff3434;
  --accent-soft:rgba(255,52,52,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at left top, rgba(255,52,52,.08), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  min-height:100vh;
  overflow-x:hidden;
}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.045;
  background-image:
    radial-gradient(circle at 20% 20%, #fff 0.7px, transparent 0.8px),
    radial-gradient(circle at 80% 30%, #fff 0.7px, transparent 0.8px),
    radial-gradient(circle at 40% 80%, #fff 0.7px, transparent 0.8px),
    radial-gradient(circle at 60% 60%, #fff 0.7px, transparent 0.8px);
  background-size: 28px 28px, 36px 36px, 44px 44px, 52px 52px;
}

.scanline{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.09;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.18) 0px,
    rgba(255,255,255,.18) 1px,
    transparent 3px,
    transparent 7px
  );
  animation:scanMove 9s linear infinite;
}

@keyframes scanMove{
  from{transform:translateY(-10px)}
  to{transform:translateY(10px)}
}

.glow{
  position:fixed;
  width:240px;
  height:240px;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  z-index:0;
  opacity:.24;
}
.glow-left{
  left:-80px;
  top:120px;
  background:rgba(255,52,52,.28);
}
.glow-right{
  right:-90px;
  bottom:120px;
  background:rgba(255,52,52,.18);
}

.wrap{
  position:relative;
  z-index:2;
  width:min(calc(100% - 28px), 760px);
  margin:0 auto;
  padding:56px 0 40px;
}

.hero{
  text-align:center;
  margin-bottom:36px;
}

.logo{
  width:min(100%, 300px);
  display:block;
  margin:0 auto 14px;
  filter:drop-shadow(0 0 16px rgba(255,52,52,.14));
}

.eyebrow{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px;
  color:#d8d8d8;
  background:rgba(255,255,255,.02);
}

h1{
  margin:16px 0 0;
  font-size:30px;
  letter-spacing:.4px;
  font-weight:800;
}

.tag{
  margin:8px 0 0;
  color:#bdbdbd;
  font-size:14px;
}

.desc{
  max-width:560px;
  margin:14px auto 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.desc strong{
  color:var(--text);
}

.links{
  display:flex;
  flex-direction:column;
  gap:2px;
  border-top:1px solid var(--line);
}

.link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 4px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  transition:all .25s ease;
  position:relative;
}

.link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-75%);
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--line-active), transparent);
  transition:width .28s ease;
  z-index:1;
}

.link:hover{
  padding-left:12px;
  background:rgba(255,255,255,.015);
  border-color:#2a2a2a;
}

.link:hover::before{
  width:120px;
}

.left strong{
  display:block;
  font-size:17px;
  font-weight:700;
}

.left span{
  display:block;
  margin-top:5px;
  font-size:13px;
  color:var(--muted);
}

.link b{
  flex:0 0 auto;
  font-size:12px;
  color:var(--accent);
  letter-spacing:1px;
  font-weight:800;
}

.contact{
  margin-top:34px;
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.contact-link{
  color:var(--accent);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  letter-spacing:.3px;
  transition:opacity .2s ease, transform .2s ease;
}

.contact-link:hover{
  opacity:.8;
  transform:translateY(-1px);
}

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}

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

@media (max-width:560px){
  .wrap{
    width:min(calc(100% - 18px), 760px);
    padding-top:28px;
  }
  .logo{
    width:min(100%, 240px);
  }
  h1{
    font-size:24px;
  }
  .desc{
    font-size:14px;
  }
  .link{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:16px 2px;
  }
  .link:hover{
    padding-left:8px;
  }
}